Menu
If I have a beacon:
<img src="http://example.com/beacon" /> I want a method to be called once the beacon request finishes. Something like:
<script> $("img.beacon").load(function() { // do stuff knowing the beacon is done }); </script> Is it possible? Is it in jQuery?
461
Method 1: Using attributes of <img> to check whether an image is loaded or not. The attributes we will use are: onload: The onload event is triggered when an image is loaded and is executed.
To determine whether an image has been completely loaded, you can use the HTMLImageElement interface's complete attribute. It returns true if the image has completely loaded and false otherwise. We can use this with naturalWidth or naturalHeight properties, which would return 0 when the image failed to load.
After you have a basic understanding of javascript, you can detect when a page has loaded by using the window. onload event. window. onload = function() { addPageContents(); //example function call. }
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
Sure. Remember the load needs to be added before the src attribute.
$('<img />').load( function(){ console.log('loaded'); }).attr('src', imgUrl); If you have defined the image tag in the markup then your stuck with when the window load event fires to be sure the image has come down the wire.
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
