Question

我允许用户提交图片以在我的网站上用作缩略图。缩略图不存储在我的服务器上。有时，其中一些确实很慢。如何删除加载时间过长的？我能想到的唯一一件事就是使用.load（）或.error（），但这些事件在图像加载/失败之前都不会触发。

编辑：甚至更好，如何暂时显示加载.gif？

Answer 1

您是否考虑过使用动画gif作为包含div的缩略图的背景？

Answer 2

您总是可以对图像（页面中的标签）进行编码，以使用某种“加载”图像，这种图像始终可以缓存。然后，您可以将实际图像加载到Image对象中。当“load”事件触发时，您可以重新分配标签的“src”属性，以便显示现在加载的图像。

<!-- in the page -->
<img class='slow' src='common_loading_image.png' data-real-image='the/real/image.png'>

// JS code
$(function() {
  $('img.slow').each(function() {
    var $img = $(this), real = new Image();

    real.onload = function() {
      $img.src = real.src;
    };
    real.src = $img.data('realImage');
  });
});

当然，这依赖于您的图像使用适合缓存的标头。如果图像没有被缓存，那么你将不得不尝试类似背景图片的建议。

Answer 3

您可以在实际图像上方放置一个加载浮动符，当加载（）时，隐藏加载浮动符

Answer 4

我认为最好的解决方案是使用背景加载图像，如Pointy和Mati所写。

但是，如果您确实要删除它们，则可以在所有图像上处理加载事件以标记下载的图像。

使用计时器，您可以在x秒后检查哪些图像尚未加载并删除它们。

如何使用JQuery删除加载速度太慢的图像？

4 个答案: