如果在预设的时间后没有完成加载，是否可以重新加载特定的图像？ javascript / jquery

问题描述

我正在运行在线摄影作品集，有时，页面上的1或2张图片无法加载。并且刷新将显示未能加载图片。

场景：
我点击链接，图片开始加载。但页面从未完成加载，因为其中一个图像无法加载。刷新后，浏览器将加载失败的图像作为良好的图像。只有ctrl + F5可以清除缓存的失败图像。

计划的解决方案：
我想检测到在10秒后没有完成加载并且动态重新加载它们的图像使用javascript / jquery。

我发现一种方法强制浏览器重新加载图像，在src =image.jpg？id = dummyNo。
但是我不知道如何检测哪个图像没有完成加载，所以我可以重新加载它们。

是否可以这样做？ p>

在sidenote，我想了解网站压缩和图像（加载时间）优化，哪里是一个好地方，我读一个好地方？

解决方案

@Pointy和@Gaby在他们的评论中是正确的。仍然我很好奇如何完成这个。

这是我想出的是值得的。未经测试。

  var images = $（'img'）; //获取所有图片。 （你想修改选择器
 //只使用所需的图像）
 
 images.load（function（）{//添加一个load事件处理程序，删除
 images = images.not（this）; //图片加载后的每个图片
}）; 
 
 setTimeout（function（）{// 10秒后，迭代每个剩余的
 images.each（function（）{// image，重新加载每一个
 // reload this image 
}）; 
}，10000）; // 10秒后运行
  

I am running a online photography portfolio and sometimes, 1 or 2 images on a page fails to load. and refreshing will display the failed to load image.

Scenario:I click on the link and the images start to load. but the page never finishes loading because one of the images fails to load. After a refresh, the browser loads the failed image as a good image. Only a ctrl+F5 can clear the cached failed image.

Planned solution:I want to detected images that did not finish loading after 10secs and reload them dynamically using javascript/jquery.

I have found a way to force the browser to reload the image by adding a dummy unique querystring behind the src="image.jpg?id=dummyNo".But I have no idea how to detect which image has not finished loading, so that i can reload them.

Is it possible to do this?

well on the sidenote, i'd like to learn about website compression and image (load time) optimising, where would be a good place for me to read up?

解决方案

@Pointy and @Gaby are right in their comments. Still I was curious about how to accomplish this.

This is what I came up with for what it's worth. Untested, though.

var images = $('img');  // Get all images. (you'll want to modify the selector
                        //    to work with only the desired images)

images.load(function() {       // Add a load event hander that removes 
    images = images.not(this); //    each image from images once loaded.
});

setTimeout(function(){        // After 10 seconds, iterate over each remaining
    images.each(function() {  //     image, reloading each one
        // reload this image
    });
},10000);  // run after 10 seconds

这篇关于如果在预设的时间后没有完成加载，是否可以重新加载特定的图像？ javascript / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！