如何在等待下载后立即显示图像

Question

下载后如何使用Javascript立即显示图片？

我尝试了Image.onload，但它一点一点地显示图像，大概是因为浏览器正在下载它并同时渲染。

如何下​​载整个图像，渲染整个图像，然后立即显示整个图像？

Answer 1

您创建一个图像元素并首先加载，然后显示它

var image = new Image();
var src   = '/url/to/image.png';

image.onload = function() {

    var img = document.createElement('img');
    img.src = src;

    document.body.appendChild(img);

}

img.src = src;

if ( img.complete ) img.onload(); // old IE hack