因为网页加载图片相对其他来说耗时间,且不是最重要的,所以一般会优先显示内容,其次显示图片
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 (canShow(box)) { showImg(img); // 用完清除 window.onscroll = null; // 之前有张默认图 box.style.background = ""; } } var box = document.getElementById("box"); var img = document.getElementById("img"); window.onscroll = scrollFn; </script> </body> </html>
原文：http://www.cnblogs.com/2han/p/6419807.html