Question

脚本的作用是使用newimage.gif更改image.jpg，反之亦然 现在我想在newimage.gif加载时添加一个微调器像9gag.com/gif上的东西。
有人可以帮帮我吗？

这是代码： HTML

<img src="/image.jpg" id="pic" onclick="change()"/>
<a id="first" href="/newimage.gif" style="display:none;"></a>
<a id="second" href="/image.jpg" style="display:none;"></a>

的javascript

function change(){
var imag = document.getElementById('pic').src;
var img = imag.slice(-3);
var img1 = document.getElementById('second').href;
var imag2 = document.getElementById('first').href;

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//    here the newimage.gif changes to image.jpg 
} else {
//    here the image.jpg changes to newimage.gif
//    i think here should be the code that will display a spinner while the image.gif loads completely
document.getElementById('pic').src=img1;
}
}

Answer 1

最简单的方法可能是将图像的CSS background-image属性设置为加载微调器图形。

HTML：

<img src="path/to/real/image.jpg" class="loading">

CSS：

img.loading {
    background: transparent url(path/to/loading.gif) no-repeat scroll center center;
}

下载实际图像后，它会覆盖“加载”动画GIF背景图像。

如果您使用渐进式显示器保存了GIF或JPG，您将需要重新保存这些图像而不使用该选项，因此在下载完整图像之前，真实图像是不可见的，从而允许您的微调器图形在此期间显示。

Answer 2

看看这个：http://www.appelsiini.net/projects/lazyload。视频外部的图像在用户滚动到它们之前不会加载，并且您可以轻松拥有一个小图像占位符，直到它被加载...

我之前在测试网站上实际使用过它：http://dev.thomaskile.me/?page=test-zone&module=Masonry。

Answer 3

我找到了一种方法，唯一的问题是在image.gif加载后，仍然会出现微调器。

if(img == 'gif') {
document.getElementById('pic').src=imag2;
//    here the newimage.gif changes back to image.jpg 
document.getElementById("spinner").style.display = "none";    
} else {
document.getElementById('pic').src=img1;

var image = new Image();
image.src = document.getElementById('second').href;

var x = image.complete;
if(x) {
document.getElementById("spinner").style.display = "none"; 
} else {
document.getElementById("spinner").style.display = "block";
}
}
}

这是我使用脚本http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk

Answer 4

您是否签出了this site可配置的微调器，而没有可附加到任何dom元素的附加图形？启动/停止微调器可以归结为2个js函数调用。

代码来自mit许可证，缩小的js独立文件需要9kb，胶水代码用作jquery插件，并且有一个vml后备，错误...蒸汽朋克浏览器; - ）。

我与代码或作者没有任何关系。

在新图像完全加载时添加微调器

4 个答案: