11
06月
2020
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#imglist img{
width: 300px;
height: 200px;
background: url('./imgs/loading.gif') no-repeat 50% 50%;
}
</style>
</head>
<body>
<h1>图片延迟加载</h1>
<hr>
<div id="imglist">
<img data-src="./imgs/mm016.jpg">
<img data-src="./imgs/mm017.jpg">
<img data-src="./imgs/mm018.jpg">
<img data-src="./imgs/mm019.jpg">
</div>
<script>
//单次定时器 1500ms 一次
setTimeout(function(){
//接收id为imglist下的所有img标签元素
var imgs = document.getElementById('imglist').getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
//给目前的元素标签加新属性src stc的值等于data-src的值 imgs[i].getAttribute('data-src');获得data-stc属性的值
imgs[i].src = imgs[i].getAttribute('data-src');
}
}, 1500);
</script>
</body>
</html>