javascript 如何在后台加载图像?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6294733/
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
how to load image in background?
提问by Ashish Agarwal
Problem: I am creating an album.So on every press of
问题:我正在制作专辑。所以在每次按
time "NEXT" button I am loading new Images. What I want to achieve is, I want to switch from old image to new image only once the new images has been downloaded fully from server.
时间“下一步”按钮我正在加载新图像。我想要实现的是,只有在从服务器完全下载新图像后,我才想从旧图像切换到新图像。
Actually I dont want to show partial images while loading.
Is there any solution?
实际上我不想在加载时显示部分图像。
有什么解决办法吗?
PS SIMILAR QUESTIONbut this is for Iphone. I need for browser?
PS类似问题,但这是针对 Iphone 的。我需要浏览器?
回答by Loktar
Just make a new image via javascript, and only show the image after the onload
has fired. This will make sure you don't see any partial rendering of the image.
只需通过 javascript 制作一个新图像,并且仅在onload
触发后显示图像。这将确保您看不到图像的任何部分渲染。
var curImg = new Image();
curImg.src = "url to your image";
curImg.onload = function(){
// do whatever here, add it to the background, append the image ect.
imgHolder.appendChild(curImg);
}
回答by Mic
You can play with 2 img tags. img1 shows the first image, while img2, is hidden, and loads the next image.
您可以使用 2 个 img 标签。img1 显示第一张图像,而 img2 隐藏,并加载下一张图像。
At the onload
event of img2, you can hide img1, and show img2.
在onload
img2事件时,可以隐藏img1,显示img2。
And load the next image with img1, and so on.
并用 img1 加载下一个图像,依此类推。
回答by Fotis Adamakis
link rel="prerender" might do the trick.
链接 rel="prerender" 可能会起作用。