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

Question

该脚本的作用是点击时将image.jpg改为newimage.gif，反之亦然。
现在我想在加载 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，则您需要在不使用该选项的情况下重新保存这些图像，以便在下载完整图像之前，真实图像是不可见的，从而同时显示旋转图形。

此答案下面的评论提到，除非图像有尺寸，否则微调器不会显示。在这种情况下，尝试在 CSS 中设置最小宽度和高度：

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

    /* assuming the GIF is 20x20 in size */
    min-height: 20px;
    min-width: 20px;
}

调整最小宽度和高度以匹配动画 GIF 的实际尺寸。正在加载的图像的默认大小似乎因浏览器而异，因此设置默认尺寸应该可以解决此问题。

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

您是否检查过此站点以获取可配置的微调器，无需附加图形即可附加到任何 dom 元素？启动/停止旋转器归结为 2 个 js 函数调用。

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

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