图片预加载，按需加载

标签：style   blog   color   io   for   cti   ar   div   

我们经常会遇到一些这样的情况。

１、页面布局时有些图片是用img标签包起来，有些是作为background-image，当用户的网络是龟速时，你会很明显的发现img标签的图片会先被加载，然后background-image的图片是最后才被加载，这时，你会发现页面用户体验非常差，background-image没渲染出界面，界面有点丑漏。

２、我们希望图片是要按照我们预先按排的顺序一张张的被加载。

３、图片想什么时候加载就什么时候加载

用ＪＳ可以这样实现：

比如我的背景图片预加载：

function loadImage(url){
    var img = new Image();
    img.src = url;
}
var bg_imgs = new Array("/images/home/bottom_bg.png","/images/home/bottom_bg2.png","/images/home/bottom_bg3.png","/images/sub/mid_bg.jpg","/images/sub/mid_bg2.jpg","/images/sub/mid_bg3.jpg");
for(var i=0;i<bg_imgs.length;i++)
{
    loadImage(bg_imgs[i]);
}

图片预加载，按需加载,布布扣,bubuko.com

图片预加载，按需加载

标签：style   blog   color   io   for   cti   ar   div   

原文地址：http://www.cnblogs.com/fastmover/p/3877480.html