javascript - 等待图像加载插件不起作用

Question

我正在使用 https://github.com/alexanderdickson/waitForImages 中的插件检测图像何时加载。

下面是我的代码:

$('.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');
});

图像加载完成后，我将开始图像的选取框滚动。

我的问题是，一些图像尚未加载，但仅显示一个小的空方框，如下所示: ,

插件也认为它已经加载。知道如何修复它吗？

仅显示一个小的空方框是否认为图像已加载？

Answer 1

只要写你自己的。

<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>

如果您想给图像一个机会，并且如果出现永久性错误则不加载选取框，您可以尝试

<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>