使用javascript后台下载图片

目录

设置body标签样式的background-image属性,可以为body标签添加背景图片,代码如下:

document.body.style.backgroundImage = "url(some url)";

浏览器会自动从url下载图片,并显示在界面上。但如果网速不快时,界面上会看到图片逐渐加载的过程。为了避免浏览器显示图片下载过程,需要使用javascript在后台下载图片。
通过 Image 类可以实现图片的后台下载。Image 对象设置 src 属性后,浏览器就会在后台下载图片,无论该 Image 对象是否在 DOM 树中。

let background_image = new Image();
background_image.src = 'some url';

图像下载是异步过程,当图片下载完成后,Image 对象会触发load事件。我们可以在load事件的响应函数中将body的背景图片设为 Image 对象的图片。注意,添加load事件处理函数一定要在设置 src 属性前。

let background_image = new Image();
background_image.onload = function(event){
    document.body.style.backgroundImage = "url("+ this.src +")";
};
background_image.src = image_url;

下载图片后切换背景图片,提高界面显示的流畅度。