html, make page appear ready (no tab spinning wheel) while just waiting for images

Question

I have a page that loads images from various sources. Occasionally these images fail to load; perhaps the link has gone dead or whatever. That's fine.

What bothers me is that the browser might take 6 seconds or even longer (I've seen 20 seconds) before it decides that the image has failed to load. During this time the spinning loading wheel in the Chrome tab keeps going and going, making it seem like my page isn't ready.

I've switched my javascript loading from onload to $(document).ready() so at least my page isn't inactive while it waits for the images to load. But it might appear as though it is.

But is there some way to make my page appear "ready" (no spinning wheel) when all it's doing is waiting for the image? Maybe another way to load images? I currently use the img element with src. Or a way to make it give up sooner? Does it really need 6 seconds to decide that an image link is dead?

Not sure if this has a solution. It's a problem that I have seen on a lot of websites, not just mine, but it drives me nuts. I'll often click the stop-loading-x just to make it stop! I'd at least like for my own website to not be like that.

Answer 1

According to my tests, the loading indicator in Chrome does not show for image elements where the loading was triggered by Javascript. Thus, if you don't mind the images not loading with javascript disabled, you could send the img with the src unset, and set it when the page loads. You can store the URL in data-src . The upside is then that you can control when the image loads, if you want to (though you may want to use a plugin for that, like Roullie's answer suggests).

---

<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">

...

$(document).ready(function(){
  $(".async-img").each(function(){
    this.src = $(this).data("src");
  })
})

Answer 2

maybe it can help. lazyload.js