Develop Reference

Javascript / jQuery: Detect when each individual image loads

I'm creating a loading bar for my website and I want to update the loading progress (%) with each image load. For testing purposes, I used console.log() (instead of updating my loading bar).
I want to detect when each individual image loads. My images are all within <div id='images>
I have not found a solution that has worked after 5 hours of searching. I'm new to jQuery & Javascript, so I may have been using incorrect syntax (such as not targetting the image container correctly, but I'm not sure.
I have tried the imagesloaded jQuery plugin, but when using $('#images').imagesLoaded(), imagesloaded had said that all images had loaded, when they hadn't. (I'm testing using two 4k images so I can see the images slowly load).
The imagesloaded jQuery code I used for testing (loadProgress.js):
$('#images').imagesLoaded() //My images are within "<div id='images></div>"
.always( function( instance ) {
console.log('all images loaded');
})
.done( function( instance ) {
console.log('all images successfully loaded');
})
.fail( function() {
console.log('all images loaded, at least one is broken');
})
.progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
// Code I used to keep track of when the page actually loaded
console.log('Page load started')
window.onload = function() {
console.log('Page load complete')
My HTML (Images were for testing purposes only and may be copyright) [just a snippit, not including doctype, body etc]:
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script scr="loadProgress.js"></script>
<div style="text-align:center" id="images">
<img src="https://wallpapers.gg/wp-content/uploads/2018/01/Old-Lion-4K.jpg" alt="Lion 4K" id='image' />
<img src="https://images7.alphacoders.com/383/383230.jpg" alt="Lion 4K" id="image" />
</div>
Console output [comment]:
Page load started
all images loaded
all images successfully loaded
[a good 5 second delay]
Page load complete
The output looks promising as the images are said to load after the page load has begun, but there is a 5 second delay between all images successfully loaded and Page load complete where I can see the images slowly render top-to-bottom and can also see the spinning loading icon in my browser tab (indicating that the images have not loaded yet, as there is no other html to load). I believe that the plugin is not correctly detecting the images container.
How can I (preferably automatically, not having to assing a unique ID to each image, and for them to collectively be found) detect when each individual image has loaded?
I'd like my console output to be (for example with two images):
Page load started
Image loaded
Image loaded
[no delay]
Page load complete
I am not looking to detect when all images have been loaded, and specifically want to repeat an action each time an image is loaded. In this case, the action would be console.log('Image loaded')
Using either Javascript or jQuery isn't a problem, and if you know a plugin which can achieve this more efficiently, I'd love to know.

I am not sure about the jQuery plugin you are using, but you could register an "onload" function to each image you want to load. No additional plugins/libraries needed, plain JavaScript should be fine.
Ideally, you would do it on backend side, not frontend, since images might be already loaded (think of browser cache) at the moment you assign the "onload" function.
If you want to target every image, just use the $('img') as your selector. If not, target their container element an you should be good to go.

Using AJAX to pass a generated image from PHP back to javascript

I have a php file generating a diagram as an image - this is working fine
This php file has to communicate with javascript (via ajax) to load this image in the html
Initially I got it working by placing this in the javascript:
document.getElementById("img3").src="ajax.php?area=" +encodeURIComponent(area);
where img3 is the image in the html and ajax.php is the php file generating the image
The problem with this code however is there are a few lines after the code above executing before the image is loaded - a timing problem.
Changed javascript/ajax code to:
ar = new XMLHttpRequest();
if(ar.readyState == 4 || ar.readyState == 0)
{
ar.open("GET", "ajax.php?area=" +encodeURIComponent(area), true);
ar.send(null);
ar.onreadystatechange = function()
{
if(ar.readyState == 4)
{
document.getElementById("img3").src = ar.response;
}// end if
}// end function
}// end if
Was with the hope I could place my lines of code inside the if(ar.readyState == 4) block which will solve the timing problem. But the image isn't loading. Any ideas?

I understand that you don't really care how the image is loaded (using src or ajax) but what you want is to execute a piece of code after an image has loaded.
There are several (some better than others) ways of checking if an image is loaded. This tread covers some of them.
For instance you could use the onload event to trigger a piece of code
document.getElementById("img").onload = function() {
//do the code which has to be executed after loading the image.
}
They describe some problems with the event not firing when the image loads from cache, but a browser (almost) never caches a .php file with get parameters. You should check if caching is an issue for your project, based on what i understand from your project i think it is not a problem.
They suggest other options which are interesting to investigate. There is one i find interesting where they suggest using imageloaded. That solution looks very solid.

How to get a list of broken images with Javascript?

In the console I have 180 failed to load resources, I need to get a list of these resources so that I can send a report to the webmaster with the images URLs. How can this be done?

You can easily track images that fail to load, as long as you set up an event listener before the image starts to load. Like this:
img.addEventListener('error', function() {
//report failed image
}, false);
If all of your images are loaded in <img> tags that are in the html, you can set up an error event for all of them in a script. Just make sure the script that sets this up is placed after the img tags, but do not run the setup in a page load event or DOMContentLoaded because you may have missed some error events, and it will be too late.
See this example:
http://jsbin.com/ekiram/2/edit
If you want, you can set up a MutationObserver event to watch for any new <img> elements added dynamically and set up an error event there. But it won't work in all browsers.
You can check whether an image has loaded by looking at the naturalWidth property. If it's 0, it hasn't loaded. But there's no way to know whether the image has actually failed to load or is just taking a really long time, like if there's a slow network connection. I suppose you could use this if you have another way to know if the page and all images are really done loading, like after a page load event or if you're willing to set a very long timeout.

If you can add a script to the page, you can bind a handler to the error event and track all failures:
$(function(){
var errorImages = [];
$('img').on('error', function(){
errorImages.push(this.src);
});
$(window).on('load', function(){
alert(errorImages);
});
});
Working example: http://jsbin.com/iboyik/3
If you want to get all failed images on a page that is already loaded, that is a little trickier. I was able to do that by reloading all images:
(function(){
var errorImages = [];
$('img')
.on('error', function(){
errorImages.push(this.src);
})
.prop('src', function(i, src){return src;});
// wait for all images to fail (bit of a hack)
setTimeout(function(){alert(errorImages);}, 1000);
})();
Working example: http://jsbin.com/iboyik/2

HTML / Javascript wait for graphics to be drawn

I've heard about the onload function which is called after the element is fully loaded.
In the case of graphics or images, does that mean it will wait until the image is displayed in the browser?
<body onload="foo()">...
<img onload="bar();"....
If not, is there a way to get the event when all graphics are drawn and images are displayed on a page?
In my case it´s only one 1600*1200 jpeg image and i draw on it. But the image has to be displayed before i start drawing, even with the onload event i see the drawed lines before the image appear.

Yes body onload will wait until all images (and other content) are loaded/displayed in the browser. The img onload will wait until that specific image has loaded/is displayed

Images have a complete property that's true when they are loaded.
e.g. would test if everything has loaded:
var allImagesLoaded = true;
$("IMG").each(function(){ allImagesLoaded &= $(this).attr("complete"); });
if(allImagesLoaded){ alert("Done!");}
Images raise a load event once they've finished loading

why dont you keep a counter for your images that will decrement by one on each image load.
check if it equal to 0 then call some another function.
in this way you can do the thing you want to when all images are loaded
$(function() {
$('img').one('load',function() {
// fire when image loads decrement the counter
if counter ==0
fireanotherfunction()
});
});
by above code u can attain your purpose

When reading the jQuery ready API documentation here:
While JavaScript provides the load event for executing code when a
page is rendered, this event does not get triggered until all assets
such as images have been completely received.
So onload is launched after everything has been loaded (and displayed).

See the window.load event:
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
This is exact what you want, I believe.
JQuery's $(document).ready is not what you want:
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event [instead of the ready event].
If you're using plain JS, window.load is what you want.
If you are using jQuery, you'll want $(document).load.

try jquery ready function
$(document).ready(function(){
bar();
});
I'm not sure if it works, but it's a try :D

I have the same problem developing a web view for an Android app. The load events (both for window and image element) as well as the complete state of the image element fire too early. My (svg) image has not yet finished drawing and thus calculations on the size go wrong.
The only workaround that I have found is a very short timer (1ms or maybe 10ms). That works for me because I have only one such image to consider. And since I start this timer when the image data has already loaded, this short lapse should be long enough for the device to paint the image.
window.addEventListener('load', function() {
var img = document.getElementById('logo');
window.setTimeout(function(){
var imgRatio = img.naturalWidth / img.naturalHeight;
var renderedWidth = parseInt(window.getComputedStyle(img).width.match(/(\d+)px/));
console.log(renderedWidth, img.complete);
if (renderedWidth < img.naturalWidth) {
img.style.height = (renderedWidth / imgRatio) + 'px';
}
}, 1);
}
Instead of the window load event, the image's load event should also work. But I found it safer to wait for everything, because other elements might affect the drawing of my image.

Pre Load images to display later on click event jQuery

I have a web page where lots of images called from server using image
scr attribute.
I have created a function like which is triggered by td click.
function GoToStep(stepNo) {
var imgSrc = $("#h1" + stepNo).val();
$(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}
Now the problem is this. For slower connections the images come after some
moment.
Can I pre load images to avoid waiting time when user clicks
td?
I have seen some jquery function to pre load images.
Kindly give some idea how can I achieve it.

Pre-loading an image is equivalent to loading an image but never displaying it. So, you can easily do it like this:
<img src="image.png" alt="" style="display:none;"/>
Now this image will be loaded as soon as the html starts rendering. Whenever you need to use this image as a display or background, just set the address to image.png and it will automatically be fetched from browser's cache.

This can be done using some javascript functions. Quoting from another question.
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
Explanation of how javascript preloaders work (different question)
[...] The way it works is simply by creating a new Image object and setting
the src of it, the browser is going to go grab the image. We're not
adding this particular image to the browser, but when the time comes
to show the image in the page via whatever method we have setup, the
browser will already have it in its cache and will not go fetch it
again. [...]
So in your case, you should use something like
$(function() {
// Do stuff when DOM is ready
preload([
'img/bg1.jpg',
'img/bg2.jpg',
'img/bg3.jpg'
]);
});