图片延迟加载
因为网页加载图片相对其他来说耗时间,且不是最重要的,所以一般会优先显示内容,其次显示图片
1.想要图片不加载,属性src不写就是,但是因为过会依然显示,所以自定义属性存src的值,等会只需赋值即可
因为图片没有src的话,有些浏览器会显示小碎片,超丑,所以提前隐藏掉.
<img id="img" data-src="500.png" alt="500"> <script> var timer = window.setTimeout(function () { var img = document.getElementById("img"); img.src = img.dataset.src; img.style.display = "block"; window.clearTimeout(timer) },500 ) </script>
2.因为有时候,各种手误可能会让src写错,以至于没有那张图片,此时应该不显示.想要看src有没有错误,拿个新的img试下水,如果成功加载表示正确,继续后面操作.
<img id="img" data-src="500.png" alt="500">
<script>
var timer = window.setTimeout(function () {
var img = document.getElementById("img");
var temp = new Image();
temp.src = img.dataset.src;
temp.onload = function () {
img.src = this.src;
img.style.display = "block";
temp = null;
}
window.clearTimeout(timer)
},500 )
</script>
3.升级一点,滚动到图片的时候再显示.且给其一张默认图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ padding-top: 1000px; } #img { display: none; } #box{ width: 300px; height: 300px; /*给一张默认图,表示这里是一张图片*/ background: url(default.jpg) center center; } </style> </head> <body> <div id="box" style="background: url(71d0d53f2591e774a4e0aece6db08961_articlex.jpg);"> <img id="img" data-src="500.png" alt="500"> </div> <script> function showImg(selector, attr) { var temp = new Image(); temp.src = selector.attr || selector.dataset.src; temp.onload = function() { selector.src = this.src; selector.style.display = "block"; temp = null; } } var box = document.getElementById("box"); var img = document.getElementById("img"); window.onscroll = fn; function fn () { // 隐藏的元素的offsetTop是0,所以用一个div包着img,滚到div的时候,显示图片,这里的滚到临界点就是 滚动条遮住的高度a+屏幕的高度b=== 盒子离body顶部的距离c (这里注意的是 a,c的值是常量哟,也就是b的值决定这个临界点) if((document.documentElement.scrollTop || document.body.scrollTop)+(document.documentElement.clientHeight || document.body.clientHeight)>box.offsetTop){ showImg(img); // 用完清除 window.onscroll = null; // 之前有张默认图 box.style.background=""; } } </script> </body> </html>
4.加上一点点动画,如渐隐渐现,其实就是到出来的时候,用下动画.顺便优化下程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { padding-top: 1000px; } #img { display: none; opacity: 0; } #box { width: 300px; height: 300px; /*给一张默认图,表示这里是一张图片*/ background: url(71d0d53f2591e774a4e0aece6db08961_articlex.jpg) center center; } </style> </head> <body> <div id="box"> <img id="img" data-src="500.png" alt="500"> </div> <script> // 负责动画 function fadeIn(selector) { var timer = window.setInterval(function() { selector.style.opacity = window.getComputedStyle(selector, null).opacity - 0 + 0.1; if (selector.style.opacity === "1") { window.clearInterval(timer); } }, 50) } // 负责显示图片 function showImg(selector, attr) { var temp = new Image(); temp.src = selector.attr || selector.dataset.src; temp.onload = function() { selector.src = this.src; selector.style.display = "block"; fadeIn(selector) temp = null; } } // 负责判断是否到临界点 function canShow(selector) { return (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight) > selector.offsetTop; } // 滚动发生的事件 function scrollFn() { if(img.isLoad){ return false } if (canShow(box)) { showImg(img); // 用完,flag改变,下次便不再加载 img.isLoad = true; } } var box = document.getElementById("box"); var img = document.getElementById("img"); // 因为一旦滚动,会一直触发事件,所以立个flag,如果加载过便不再执行 // 这里之所以不用 window.onscroll=null,因为一旦滚动还是会触发事件 img.isLoad = false; window.onscroll = scrollFn; </script> </body> </html>
5.多张图片,第一屏的图片一般延时加载即可,之后的图片滚到哪显示哪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } ul { list-style: none; } body { font-size: 12px; font-family: "microsoft yahei"; } .item { height: 80px; border-bottom: 1px dashed #ccc; position: relative; overflow: hidden; } .item-left { width: 70px; height: 100%; position: absolute; top: 0; left: 0; /*默认图片*/ background: url(71d0d53f2591e774a4e0aece6db08961_articlex.jpg) center center no-repeat; } .item-left img { width: 100%; max-height: 100%; /*先隐藏*/ display: none; /*为了动画*/ opacity: 0; } .item-right { margin-top: 5px; padding-left: 80px; } h3 { font-size: 14px; } </style> </head> <body> <ul id="list"> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> <li class="item"> <div class="item-left"> <img data-src="500.png" alt=""> </div> <div class="item-right"> <h3>标题</h3> <p>一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点文字一点</p> </div> </li> </ul> <script> // 负责动画 function fadeIn(selector) { var timer = window.setInterval(function() { selector.style.opacity = window.getComputedStyle(selector, null).opacity - 0 + 0.1; if (selector.style.opacity === "1") { window.clearInterval(timer); } }, 50) } // 负责显示图片 function showImg(selector, attr) { var temp = new Image(); temp.src = selector.attr || selector.dataset.src; temp.onload = function() { selector.src = this.src; selector.style.display = "block"; fadeIn(selector) temp = null; } } // 负责判断是否到临界点 function canShow(selector) { return (document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight) > selector.offsetTop; } // 滚动发生的事件 function scrollFn() { for (var i = 0; i < items.length; i++) { box = items[i]; img = box.getElementsByTagName("img")[0]; // console.log(img) if (img.isLoad) { continue;; } if (canShow(box)) { showImg(img); img.isLoad = true; } } } var list = document.getElementById("list"); var items = document.getElementsByClassName("item"); var box, img; // 第一屏,也就是没触发滚动事件,但是要让其触发,不然没图片呐 var timer = window.setTimeout(scrollFn,500) // 第一屏之后的 window.onscroll = scrollFn; </script> </body> </html>
