如何使用JQuery删除加载太慢的图像?

How can I remove images that are loading too slow using JQuery?

本文关键字：图像 加载 何使用 JQuery 删除      更新时间：2023-09-26

我允许用户提交图像作为缩略图在我的网站上使用。缩略图没有存储在我的服务器上。有时候，他们中的一些人真的很慢。我如何移除那些加载时间太长的?我唯一能想到的是使用。load()或。error()，但这些事件甚至不会触发，直到图像加载/失败。

编辑:或者更好，我怎么能暂时显示加载。gif?

你考虑过使用gif动画作为包含div的缩略图的背景吗?

您总是可以对图像(即页面中的标记)进行编码，以使用某种"加载"图像，这些图像始终是相同的，可能会被缓存。然后，您可以将真实的图像加载到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');
  });
});

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

可以在实际图像上方放置一个加载浮动，当load()时，隐藏加载浮动

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

但是，如果你真的想删除它们，你可以处理所有图像的load事件来标记下载的图像。

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

相关文章：