javascript 在新图像完全加载时添加微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21258195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add spinner while new image gets loaded completely
提问by Marian07
The role of the script is to change image.jpg with newimage.gif and vice versa when clicked.
Now i want to add a spinner while the newimage.gif loads.
Something like on 9gag.com/gif .
Can someone help me please?
该脚本的作用是在单击时将 image.jpg 更改为 newimage.gif，反之亦然。
现在我想在加载 newimage.gif 时添加一个微调器。
类似于 9gag.com/gif 上的内容。
有人能帮助我吗？
This is the code: html
这是代码：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
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;
}
}
回答by Greg Burghardt
The easiest way might be to set the CSS background-imageproperty of the images to a loading spinner graphic.
最简单的方法可能是background-image将图像的 CSS属性设置为加载旋转器图形。
HTML:
HTML：
<img src="path/to/real/image.jpg" class="loading">
CSS:
CSS：
img.loading {
background: transparent url(path/to/loading.gif) no-repeat scroll center center;
}
Once the actual image is downloaded, it covers up the "loading" animated GIF background image.
下载实际图像后，它会覆盖“正在加载”的动画 GIF 背景图像。
If you have GIFs or JPGs saved with Progressive display, you'll want to resave those images without that option so the real image is invisible until the full image is downloaded allowing your spinner graphic to show through in the meantime.
如果您使用渐进式显示保存了 GIF 或 JPG，您将希望在没有该选项的情况下重新保存这些图像，这样真实图像在下载完整图像之前是不可见的，同时允许您的微调图形显示出来。
回答by ThomasK
Have a look at this: http://www.appelsiini.net/projects/lazyload. Images outside of viewport are not loaded until user scrolls to them, and you have the aboility to have a small image placeholder untill it's loaded...
看看这个：http: //www.appelsiini.net/projects/lazyload。在用户滚动到它们之前不会加载视口外的图像，并且在加载之前您可以拥有一个小图像占位符......
I've actually used it here, on a testing site, some time ago: http://dev.thomaskile.me/?page=test-zone&module=Masonry.
前段时间我在测试站点上实际使用过它：http: //dev.thomaskile.me/?page=test-zone&module=Masonry。
回答by Marian07
I found a kind of way, the only problem is that after the image.gif gets loaded the spinner still appears.
我找到了一种方法，唯一的问题是在加载 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";
}
}
}
This is here i use the script http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk
这是在这里我使用脚本http://www.2lol.ro/load/poze_haioase_miscatoare/20?ref=stk
回答by collapsar
Have you checked out this sitefor a configurable spinner without additional graphics that can be attached to any dom element ? starting / stopping the spinner boils down to 2 js function calls.
您是否在此站点上查看过没有附加图形的可配置微调器，可以附加到任何 dom 元素？启动/停止微调器归结为 2 个 js 函数调用。
the code comes under the mit license, the minified js standalone file takes 9kb, glue code for use as a jquery plugin is provided and there is a vml fallback for, err... steampunk browsers ;-).
代码在 mit 许可下，缩小的 js 独立文件需要 9kb，提供用作 jquery 插件的胶水代码，并且有一个 vml 后备，错误...蒸汽朋克浏览器;-)。
i'm not affiliated in any way with code or author.
我与代码或作者没有任何关联。
