图片预加载

来源：互联网发布：施坦威立式钢琴知乎编辑：程序博客网时间：2024/05/11 00:02

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<scripttype="text/javascript">

// 第一步：先在head里面创建一个ImgArr图片数组，将所有图片资源src作为字符串存入

varimgArr = ["http://img1.gamedog.cn/2014/06/06/119-140606094H70.jpg","http://image.kejixun.com/2015/0923/20150923104113224.jpg","http://i0.sinaimg.cn/gm/2015/0325/U11284P115DT20150325153725.jpg"];

</script>

</head>

<body>

<divid="div1">

</div>

<scripttype="text/javascript">

vardiv1 = document.getElementById("div1");

// 第二步：定义一个数组，用于保存image对象，用过循坏生成各个img对象，将新生成的img对象的src属性设置成head里面那个数组里面的值

varimgs = [];

// 计数

varcount = 0;

for (var i = 0; i< imgArr.length; i++) {

// 先生成image对象

varimg = new Image();

// 设置图片的src属性

img.src= imgArr[i];// 到这里预加载完成，img.src= ？？？，这条语句会触发向服务器要图片资源，图片已经在浏览器的缓存中存在，再次发出请求图片的请求会收到304返回码，这样可以节省时间

// 方法一：

// var myimg = document.createElement("img");

// myimg.src = imgArr[1];

// div1.appendChild(myimg);

// 方法二：

// 加载图片

img.onload= function() {

// 每加载一张图片，计数+1

count++;

// 第三步：通过push方法，将各个img对象添加到imgs这个数组里面

imgs.push(this);

if(count == 3) {

for(var j = 0; j< imgs.length; j++) {

// 从imgs数组中获取每一个img添加到div1下，作为div1的子节点

div1.appendChild(imgs[j]);

}

// HTTP协议

// 1(消息)

// 200(ok)

// 304(重定向)

// 404(客户端)

// 500(服务器端)

</script>

</body>

</html>

0 0