Qarpeo LogoInstitute

Network

HTML network event attributes track and manage the loading, error handling, and progress of external resources, enhancing user experience and page performance.

network event

HTML network event attributes monitor the loading and interaction of external resources (like images or scripts). They help track status, handle errors, and optimize web page performance.

Common network events include

  1. onload: Triggered when a resource (image, script, etc.) finishes loading successfully.
index.html
<img src="image.jpg" onload="alert('Image loaded!')" />
  1. onerror: Fired if an error occurs while loading a resource.
index.html
<img src="invalid.jpg" onerror="alert('Error loading image!')" />
  1. onabort: Activated when the loading of a resource is aborted.
index.html
<img src="image.jpg" onabort="alert('Image load aborted!')" />
  1. onprogress: Triggered during the loading of a resource, typically used for showing progress (like a loading bar).
index.html
<script>
  function updateProgress(event) {
    console.log(`Loaded ${event.loaded} of ${event.total}`);
  }
</script>
<img src="image.jpg" onprogress="updateProgress(event)" />

These events help improve user experience by providing feedback and controlling resource load behavior.

Conclusion

HTML network event attributes help manage the loading and error handling of external resources like images and scripts. Events such as onload, onerror, onabort, and onprogress enhance user experience by providing feedback on resource loading and handling issues effectively. These events contribute to optimizing page performance and ensuring smoother web interactions.

onshow

The onshow event in HTML is triggered when a <dialog> element becomes visible, enabling scripts to perform actions based on its display.

onoffline

The onoffline event is triggered when the browser loses its internet connection. It is the inverse of the ononline event.