圖片懶載入
阿新 • • 發佈:2018-12-19
html:
<img src="/images/nullspecail.jpg" data-title="測試" data-src="http://kangsf1989.net/120-147-b.jpg"alt="">
js:
<script> var imgs = document.querySelectorAll('img'); function getTop(e) { var T = e.offsetTop; while (e = e.offsetParent) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { var H = window.innerHeight; var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { (function (imgs, i) { var imgSrc = imgs[i].getAttribute('data-src'); var title = imgs[i].getAttribute('data-title'); //匹配無圖|無題 var reg = RegExp(/無[圖題]/); var status = reg.test(title); if(status) return ; var img = new Image(); img.src = imgSrc; img.onload = function () { if (img.width == 100 && img.height == 130) { } else { imgs[i].src = typeof(img.src) != 'undefined' ? img.src : '/images/nullspecail.jpg'; } }; })(imgs, i) } } } window.onload = window.onscroll = function () { lazyLoad(imgs); } </script>