图片懒加载原生写法。

HTML

<img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" />
        <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" />
        <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" />
        <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" />
        <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />

说白了就是一大堆图片

给个样式

img {
                width: 300px;
                height: 300px;
                float: left;
                margin: 10px;
                border: #000 1px solid;
            }

最后是重点

JS

function getPos(obj) {
                var l = 0;
                var t = 0;
                console.log(obj)
                while(obj) {
                    l += obj.offsetLeft; //元素距左窗口距离
                    t += obj.offsetTop; //元素距上窗口距离
                    obj = obj.offsetParent; //返回元素的有定位属性的父节点
                }
                return {
                    left: l,
                    top: t
                };
            }
            window.onload = window.onscroll = window.onresize = function() {
                var aImg = document.getElementsByTagName('img');
                var oScroll = document.documentElement.scrollTop || document.body.scrollTop;
                var clientH = document.documentElement.clientHeight;
                for(var i = 0; i < aImg.length; i++) {
                    var imgTop = getPos(aImg[i]).top;
                    if(oScroll + clientH >= imgTop) {
                        aImg[i].src = aImg[i].getAttribute('_src');
                    }
                }
            }

这样就大功告成了

转载于:https://www.cnblogs.com/UniverseWang/p/7227296.html