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

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

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

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 。