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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 20:12:48  来源:igfitidea点击:

how to load image in background?

javascriptimagexmlhttprequestloading

提问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 onloadhas fired. This will make sure you don't see any partial rendering of the image.

只需通过 javascript 制作一个新图像,并且仅在onload触发后显示图像。这将确保您看不到图像的任何部分渲染。

Live Demo

现场演示

    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 onloadevent of img2, you can hide img1, and show img2.

onloadimg2事件时,可以隐藏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" 可能会起作用。

http://www.catswhocode.com/blog/mastering-html5-prefetching

http://www.catswhocode.com/blog/mastering-html5-prefetching