Question

创建加载图像以在加载时取代.gif的最佳方法是什么？我想要一个关于325x325（gif的大小）的占位符图像来保存内容。

我没有成功尝试后台：url（）并没有查看JS / jQuery，因为我不是很精通它。

提前感谢您的帮助。

Answer 1

如果您可以或者想要使用jQuery，您可以使用onLoad函数加载图像并在加载后执行某些操作（例如将gif替换为图像加载）。

结帐this JSFiddle。它可以让您显示立即加载的图像，以及需要1000毫秒加载的图像。

这是怎么做到的？看看这段代码：

var url="http://i.imgur.com/QoRjjFu.jpg", //the URL of the image to load
    image=$("#some-image"),               //get the image element           
    newImage = new Image();               //create a new image 

//this is called after the image loads
newImage.onload = function(){
    image.attr('src', url).show();  //swap out the loading gif
};

//this triggers loading the image, which will trigger onload above when done
newImage.src = url;

现在，如果图像加载速度很快，您不希望快速闪烁加载gif，然后切换新图像（因为它会导致闪烁效果）。你想要一起跳过加载gif并只显示图像。您可以通过使用超时来执行此操作，并且仅在新图像未加载时显示加载gif，例如200ms：

var url="http://i.imgur.com/QoRjjFu.jpg",
    image=$("#some-image"),
    newImage = new Image();

newImage.onload = function(){
    clearTimeout(loadingGif); //clear the loading gif timeout
    image.attr('src', url).show();
};

//if the image hasn't loaded after 200ms, show the loading gif
var loadingGif = setTimeout(function(){
   image.show();
}, 200);

newImage.src = url;

我希望这有帮助！

占位符图像是图像区域的大小？

1 个答案: