原生JavaScript实现懒加载

最新推荐文章于 2024-07-04 00:59:27 发布

baitao1983

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/beau30/p/6958786.html

版权

源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html

实现原理就是通过scroll事件判断元素是否已经进入viewport

导入

lazyLoad.js

使用

inViewPort(item)即可 判断item是否在视口里，然后继续进行自己的逻辑就行了

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/global.css">
    <style>
    .content {
        /*height: 1500px;*/
        width: 100%;
        overflow: hidden;
    }
    
    .content>img {
        border-radius: 5px;
        display: inline-block;
        margin: 200px 0 0 200px;
        
        width: 235px;
    }
    </style>
</head>

<body>
    <div class="content bg1" id="js-imgdiv">
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/1.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/2.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/3.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/4.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/5.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/6.jpg" alt="" >
    </div>

    <script type="text/javascript" src="./static/js/util.js"></script>
    <script type="text/javascript" src="./static/js/lazyLoad.js"></script>
    <script>
    (function() {
        window.onload=function(){

            var pics = $$("#js-imgdiv>img");
            setPicSrc(pics);
            window.onscroll = function(){
                setPicSrc(pics);
            };
            function setPicSrc(pics){
                pics.forEach(function(item){
                    if(inViewPort(item)){
                        setTimeout(function(){
                            item.src = item.dataset.url;
                        },200);//模拟一下网速慢的情况 
                    };   
                });
                        
            }

        };
    }());
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/beau30/p/6958786.html

baitao1983

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JavaScript实现懒加载

源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html实现原理就是通过scroll事件判断元素是否已经进入viewport导入lazyLoad.js使用inViewPort(item)即可判断item是否在视口里，然后继续进行自己的逻辑就行了<!DOCTYPE html>&l...
复制链接

扫一扫