等待图像加载插件不起作用答案

【问题标题】：Wait for image to load plugin not functioning等待图像加载插件不起作用
【发布时间】：2016-08-26 18:13:59
【问题描述】：

我正在使用来自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');
});

图像加载完成后，我将开始滚动图像。

我的问题是，有些图片还没有加载，只是显示一个像这样的小空方框： ,

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

只显示一个小的空方框是否考虑加载图像？

【问题讨论】：

插件损坏 - 向插件作者报告对作者来说会很好
我已经上传了空框图片
谢谢。这里没有人知道其中一个长什么样
@JaromandaX 如果您需要，这里还有一些：google.nl/search?q=broken+image+icon ;)
所以，现在只需针对所有已知的可能损坏的图像图像创建一个模式匹配算法，并尝试预测未来的图像，步骤 3 = 利润

标签： javascript jquery html css waitforimages

【解决方案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>

【讨论】：

您的函数将隐藏损坏的图像。如果我真的想要图像怎么办？我要重新加载页面吗？
如果出现错误，您可能无法获得图像。如果图像存在，您需要修复它给出错误的原因
我不能这样做吗：
那将是非常不明智的。然后，如果图像不存在，它将不停地重新加载
我正在从服务器获取图像。这仅在服务器刚刚启动时发生。我有 5 个客户端，它将从服务器获取图像。有没有可能是服务器一次处理不了这么多客户端，导致图像无法通过？

【解决方案2】：

如果您想等到所有页面图像加载完毕后再运行您的字幕代码，您可以使用：

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

更多细节可以在这个问题中找到： Official way to ask jQuery wait for all images to load before executing something

【讨论】：