jQuery load() handle image loading event

Introduction

Alert a text when an image is fully loaded.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>/*from w  ww.ja va 2  s  . c om*/
<script>
$(document).ready(function(){
  $("img").load(function(){
    document.getElementById("demo").innerHTML = "Image loaded.";
  });
});
</script>
</head>
<body>

<p id="demo"></p>

<img src="image2.png" alt="image2.png" width="304" height="236">
</body>
</html>

The load() method was deprecated in jQuery version 1.8 and removed in version 3.0.

The load() method attaches an event handler to the load event.

The load event occurs when a specified element has been loaded.

This event works with elements such as image, script, frame, iframe, and the window object.

Depending on the browser, the load event may not trigger if the image is cached. 

$(selector).load(function)
Parameter Optional Description
function Required.function to run when the specified element is done loading



PreviousNext

Related