<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片预加载和延时加载</title>
<style type="text/css">
</style>
</head>
<body>
<div class="imgDiv">点我加载图片</div>
<div class="delay">
<img src=""/>
<div>点我开始加载图片</div>
</div>
</body>
<script type="text/javascript">
//图片的预加载。利用src属性的特性，可以在插入图片之前，先给图片赋值src属性，这样会让图片先去请求，等到使用的时候，图片已经加载完毕，可以直接使用
//图片的src属性，图片只有在赋值src之后，才会开始加载图片
var img=document.createElement('img');
img.src="AKL.jpg";
img.onload=function () {
console.log("图片加载完毕了");
}
var imgDiv=document.querySelector(".imgDiv");
imgDiv.onclick= function () {
imgDiv.appendChild(img);
}
//延时加载 不给img设置src属性，当需要展示这张图片的时候才去设置。
var delayDiv=document.querySelector(".delay");
delayDiv.onclick = function () {
document.querySelector(".delay img").src = "AKL.jpg";
}
</script>
</html>
网友评论