check if multiple images loaded within certain timeinterval; if not then replace with other url

Question

Problem- I am displaying some images on a page which are being served by some proxy server. In each page I am displaying 30 images ( 6 rows - 5 in each row). Here if due to overload or due to any other issue if proxy server could not able to server images( either all images or some of them) in 6 seconds then I want to replace unloaded image url with some other url using javascript so that I could display 30 images at the end.

What I tried is below.

objImg = new Image();
objImg.src = 'http://www.menucool.com/slider/prod/image-slider-4.jpg';

if(!objImg.complete)
  { 
     alert('image not loaded');
  }else{
     img.src = 'http://www.menucool.com/slider/prod/image-slider-4.jpg';
  }

I also tried with below code.

$('img[id^="picThumbImg_"]').each(function(){
        if($(this).load()) {
            //it will display loaded image id's to console
            window.console.log($(this).attr('id'));
        }
    });

I could not use set time-out for each image because it will delay all page load.

I checked other similar question on stack-overflow but no solution worked me perfectly as I need to display multiple images.Please guide how to proceed.

How about an image loader [such as this (YAIL)](https://github.com/AbdiasSoftware/YAIL-imageLoader-for-JavaScript). That will deal with bulk loading and errors. — , Nov 13 '13 at 05:38

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You don't have to wait 6 seconds, or using TimeOut. You can check if the images are loaded or not using the onload Javascript/Jquery event. I know, it will take a little bit to dispatch the onerror event, let see:

Why don't use the `load` Jquery event on the window or the image itself?

$(window).load(function(){
    //check each image
})

Disadvantage:

It will wait for other resources like scripts, stylesheets & flash, and not just images, which may or may not be OK to you.
If the image loads from the cache, some browsers may not fire off the event (included yours and that's why your code is not working)

Why don't use the `error` Jquery event on the image itself?

$('img[id^="picThumbImg_"]').error(function(){
       //image loading error
})

Disadvantages:

It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

Note:: Error is almost the same that the load event

Improving the code!:

$('img[id^="picThumbImg_"]').one('error', function() {
   // image load error
}).each(function() {
   if(!this.complete) $(this).error();
});

This will avoid few things of the previous code, but you still will have to wait if it's a 404 and you're replacing it in the onerror event, that will take a little bit right?

So, what now!

You can use this awesome plugin!. Once you add the reference, you just have to use something like:

var imgLoad = imagesLoaded('#img-container');
imgLoad.on( 'always', function() {
  // detect which image is broken
  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
    if(!imgLoad.images[i].isLoaded){
       //changing the src
       imgLoad.images[i].img.src = imgLoad.images[i].img.getAttribute("data-src2");
    }
  }
});

Your HTML markup should look like:

<div id="img-container">
    <div class="row">
        ...
    </div>
    <div class="row">
        <img src="original-path.jpg" data-src2="alternative-path.jpg">
        ...
    </div>
    <div class="row">
        ...
    </div>
</div>

Note: You don't need jQuery in this case and this plugin is suggested by Paul Irish ;)

Sounds good but where we are considering the time-interval for the case where multimedia proxy server is slow or it will consider this delay ?Actually I m confused with your first line. I need to use this inside a function which get invoked after 6 seconds. — Gaurav Pant, Nov 13 '13 at 07:06

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

Give all your images a specific class. Loop through your images and use .load() to check if loaded, example below...

Detect image load

edited May 23 '17 at 10:31

Community

1
1

answered Nov 13 '13 at 05:38

RealityDysfunction

2,609
3
26
53

@RealityDysfunction- You are detecting when image is loaded. My problem is different. If any image has not been loaded in 6 seconds then load image from other src. Also note it that I need to load multiple images ( 30 in a page). – Gaurav Pant Nov 13 '13 at 05:43
There is a timeout function, give it 6 seconds and you should be good. – RealityDysfunction Nov 13 '13 at 15:04

check if multiple images loaded within certain timeinterval; if not then replace with other url

2 Answers2

Why don't use the load Jquery event on the window or the image itself?

Why don't use the error Jquery event on the image itself?

Improving the code!:

So, what now!

Why don't use the `load` Jquery event on the window or the image itself?

Why don't use the `error` Jquery event on the image itself?