排列3和值遗漏 体育
 找回密码
 立即注册

解决图片按顺序加载问题

admin 2018-9-28 14:45 231人围观 seo建站

!DOCTYPE htmlhtmlhead meta http-equiv="Content-Type" content="text/html; charset=utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" titleZqz_loadLoad实现/title/headbody div style="wid ...
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Zqz_loadLoad实现</title>
</head>

<body>
    <div style="width: 100px;height: 1000px"></div>
    <img src="图1" data-src='./img/1.jpg' width="300px" height="300px" />
    <img src="图2" data-src='./img/2.png' width="300px" height="300px" />
    <img src="图3" data-src='./img/3.png' width="300px" height="300px" />
    <img src="图4" data-src='./img/4.png' width="300px" height="300px" />
    <img src="图5" data-src='./img/5.png' width="300px" height="300px" />
</body>
<script type="text/javascript">
window.onload = function(e) {
    zlazyLoad()
}

function zlazyLoad() {
    var doms = document.querySelectorAll('img[data-src]');

    doms.forEach(function(node) {
        var rect = node.getBoundingClientRect(),
            viewHeight = document.documentElement.clientHeight;

        if (node.getAttribute('data-src') === '') return;

        if (rect.top < viewHeight && rect.bottom >= 0) {
            console.log('show')
            var src = node.getAttribute('data-src');
            console.log(src)
            node.setAttribute('src', src)
        }
    })
}

//谷歌下的滚动监听
document.addEventListener('mousewheel', function(e) {
    console.log(e.wheelDelta)
    zlazyLoad();
}, false)

//火狐下的滚动监听
document.addEventListener('DOMMouseScroll',function (e) {
    console.log(e.wheelDelta)
},false)
</script>

</html>
二维码
?#38431;?#20851;注,微信 【www_csseo_cc】
排列3和值遗漏 体育 一尾中特平 尤文图斯vs弗罗西诺内 31选7开奖查询 福建快3开奖结果查询 现金咖啡游戏 宁夏十一选五开奖结果走基本走势图 塔什干棉农对阿尔萨德 时时彩走势图看法分析 多乐彩票骗局 四象APP