Wait for image to load plugin not functioning

Question

I'm using the plugin from https://github.com/alexanderdickson/waitForImages to detect when is the image loaded.

Below is my code:

$('.marquee').waitForImages(function() {
  console.log('All images have loaded.');
  setTimeout(startMarquee);
}, function(loaded, count, success) {
  console.log(loaded + ' of ' + count + 
   ' images has ' + (success ? 'loaded' : 'failed to load') + '.');
  $(this).addClass('loaded');
});

I will start a marquee scrolling of images when the images is loaded complete.

My problem is, some images had not yet load but just show a small empty square box like this: ,

the plugin also consider it already load. Any idea how to fix it?

Does showing a small empty square box only is consider image loaded?

broken plugin - report to plugin author would be nice for the author — Jaromanda X, Aug 26 '16 at 06:40
@JaromandaX here are some more if you need: https://www.google.nl/search?q=broken+image+icon ;) — mplungjan, Aug 26 '16 at 06:46
The image you show is what is shown onerror. The plugin likely consider that `done` too or it would never finish — mplungjan, Aug 26 '16 at 06:47
so, now it's just a matter of creating a pattern matching algorithm against all known possible broken image images, and try to predict future ones, and step 3 = profit — Jaromanda X, Aug 26 '16 at 06:47
U mean that is consider loaded also? But I want the real image to come out. Anyway to wait for the image to come out? — Coolguy, Aug 26 '16 at 06:49
frivolity aside - how are you loading the images whose class is .marquee - perhaps the problem is that you are not doing that part right — Jaromanda X, Aug 26 '16 at 06:49
It is broken because it was not loaded and never will unless you reload perhaps — mplungjan, Aug 26 '16 at 06:49
I have a div with class marquee to put my scrolling image :
. Is it cannot do like this? — Coolguy, Aug 26 '16 at 06:51
You could use the each callback to determine if an image failed and perform some other action - the plugin author. — alex, Aug 26 '16 at 18:29

mplungjan · Answer 1 · 2016-08-26T07:43:51.787

0

Just write your own.

<marquee id="marquee" style="visiblity:hidden">
  <img src="image1.jpg" onload="countMe(this,1)" onerror="countMe(this,0)"/>
  <img src="image1.jpg" onload="countMe(this,1)" onerror="countMe(this,0)"/>
  <img src="image1.jpg" onload="countMe(this,1)" onerror="countMe(this,0)"/>
 </marquee>

 <script>
 var imageCount = 0, nofImages=$("#marquee img"); 
 function countMe(img,success) {
   if (!success) $(img).hide();
   imageCount++;
   if (imageCount == nofImages) $("#marquee").show();
 }
 </script>

If you want to give the image a chance and not load the marquee if permanent error you can try

<marquee id="marquee" style="visiblity:hidden">
  <img src="image1.jpg" onload="countMe(this)" onerror="reloadMe(this)"/>
  <img src="image2.jpg" onload="countMe(this)" onerror="reloadMe(this)"/>
  <img src="image3.jpg" onload="countMe(this)" onerror="reloadMe(this)"/>
 </marquee>

 <script>
 var imageCount = 0, nofImages=$("#marquee img"); 
 function countMe(img) {
   imageCount++;
   if (imageCount == nofImages) $("#marquee").show();
 }
 function reloadMe(img) {
   var tries = img.getAttribute("tries")?parseInt(img.getAttribute("tries"),10):1;
   if (tries) == 3) return; // stop it
   tries++;
   img.setAttribute("tries",tries);
   img.src=img.src;
 }
 </script>

edited Aug 26 '16 at 07:43

answered Aug 26 '16 at 06:55

mplungjan

169,008
28
173
236

Your function will hide the broken image. How bout if I really want the image? Do I reload the page? – Coolguy Aug 26 '16 at 07:04
You will likely not get the image if it errors. If the image exists you need to fix why it gives error – mplungjan Aug 26 '16 at 07:12
Can't I do something like this: – Coolguy Aug 26 '16 at 07:26
That would be very unwise. Then if an image did not exist, it would reload non-stop – mplungjan Aug 26 '16 at 07:35
I am getting the image from a server. This happen only when the server is just startup. And I got 5 client which will get the image from the server. Is there a possibility that the server can't cope with so many client in one go that's why the image can't get trough? – Coolguy Aug 26 '16 at 07:38
Yes that is possible. You can use setTimeout to defer loading. To reload broken images 3 times, see my update – mplungjan Aug 26 '16 at 07:44

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

If you want to wait till all page images loaded before running your marquee code you can use:

$(window).on("load", function() {
    // all page html and images loaded
});

More details can be found in this questions: Official way to ask jQuery wait for all images to load before executing something

edited May 23 '17 at 12:24

Community

1
1

answered Aug 26 '16 at 10:13

Amr Elgarhy

66,568
69
184
301

Wait for image to load plugin not functioning

2 Answers2