Javascript / jQuery: Detect when each individual image loads

Question

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 don't see the problem in Chrome 78: https://codepen.io/scoutskylar/pen/PooagZE. Try Chrome to test if it's a browser-specific problem. — Skylar, Nov 09 '19 at 20:53

score 1 · Accepted Answer · answered Nov 09 '19 at 19:54

1

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.

answered Nov 09 '19 at 19:54

mihajlo

98
2
4
15

I'm incredibly new to jQuery so I'm not exactly sure how to code what you're suggesting, but after a quick search and visiting a site I've already researched today, I tried [this](https://stackoverflow.com/a/3877079/9457576), and tried using `#image` instead of 'img`, but it didn't log to console with either variant. – OverflowingStack Nov 09 '19 at 20:00
Ok, can you post your example on CodePen? It will be easier to show you that way. – mihajlo Nov 09 '19 at 20:08
Something like this? https://codepen.io/mihajlolazar/pen/QWWxoeB it is a basic example, you should also check if images are already loaded. – mihajlo Nov 09 '19 at 20:28
That works perfectly on CodePen but I cannot replicate the results locally, even when using an identical environment. – OverflowingStack Nov 09 '19 at 21:04
Strange.. can you post a screenshot of your local html setup? Maybe you have a typo or something. – mihajlo Nov 09 '19 at 21:12
I'm using Jekyll so it's a bit messy, but excluding Jekyll I've managed to make it work, so now It's just trial an error. Is there a way to give specific javascript code priority (such as `!important` with css)? – OverflowingStack Nov 09 '19 at 21:18
Priority in terms of execution order? As far as I know, there is nothing like that. There are some workarounds, but I wouldn't suggest them. – mihajlo Nov 09 '19 at 21:31

Javascript / jQuery: Detect when each individual image loads

1 Answers1