图片的预加载和延时加载
作者:
洛洛kkkkkk | 来源:发表于
2017-04-20 19:16 被阅读0次<!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>
本文标题:图片的预加载和延时加载
本文链接:https://www.haomeiwen.com/subject/peolzttx.html
网友评论