jquery - replace broken image icon while image is loading

Question

I have a page that has a list of many <img> tag. So it takes a long time to load all images. Before loading any image, I see the broken image icon. I want to replace broken image while loading the images. I tested this answer, but it just worked when a error happens. Is there anyway for doing that with javascript or jquery?

Answer 1

I found a good solution on GitHub. Just use the CSS code below:

img[src=""],
img:not([src]) {
  visibility: hidden;
}

Link: https://github.com/wp-media/rocket-lazy-load/issues/60

Answer 2

You can load a placeholder image, but then you must load that image (when you're already loading another image). If you load something like a spinner via a GET request, that should be ok since you can set cache headers from the server so the browser does not actually make any additional requests for that loading image. A way that Pinterest gets around this is by loading a solid color and the title of each of their posts in the post boxes while the images are loading, but now we're getting into a design discussion. There are multiple ways to skin a cat.

Regarding loading several images, you have to understand a couple considerations:

1. The time it takes to fetch and download an image.
2. The time it takes to decode this image.
3. The maximum number of concurrent sockets you may have open on a page.

If you don't have a ton of images that need to be loaded up front, consideration 3 is typically not a problem since you can optimistically load images under the fold, but if you have 100s of images on the page that need to be loaded quickly for a good user experience, then you may need to find a better solution. Why? Because you're incurring 100s of additional round trips to your server just load each image which makes up a small portion of the total loading spectrum (the spectrum being 100s of images). Not only that, but you're getting choked by the browser limitation of having X number of concurrent requests to fetch these images.

If you have many small images, you may want to go with an approach similar to what Dropbox describes here. The basic gist is that you make one giant request for multiple thumbnails and then get a chunked encoding response back. That means that each packet on the response will contain the payload of each thumbnail. Usually this means that you're getting back the base64-encoded version of the payload, which means that, although you are reducing the number of round trips to your server to potentially just one, you will have a greater amount of data to transfer to the client (browser) since the string representation of the payload will be larger than the binary representation. Another issue is that you can no longer safely cache this request on the browser without using something like IndexedDB. You also incur a decode cost when you set the background image of each img tag to a base64 string since the browser now must convert the string to binary and then have the img tag decode that as whatever file format it is (instead of skipping the base64->binary step altogether when you request an image and get a binary response back).

Answer 3

you can use placeholder image, which is very light weight and use that in place of each image.

same time while loading page, you can load all the images in hidden div. then on document ready you can replace all the images with jQuery.

e.g.

HTML

<img src="tiny_placeholder_image" alt="" data-src="original_image_src"/>
<!-- upto N images -->


<!-- images are loading in background --> 
<div style="display:none">
   <img src="original_image_src" alt=""/>
   <!-- upto N images -->
</div>

JavaScript

(function($){
    // Now replace all data-src with src in images. 
})(jQuery);