懒加载封装

最新推荐文章于 2025-05-07 09:01:12 发布

MiyaFairyland

最新推荐文章于 2025-05-07 09:01:12 发布

阅读量145

点赞数

文章标签： javascript html js

本文链接：https://blog.youkuaiyun.com/m0_57091576/article/details/116165182

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        p{
            height: 2000px;
        }
        #box{
            height: 300px;
            background-color: hotpink;

        }


    </style>

</head>
<body>

<p></p>
<div id="box">
    <div id="pox"></div>
</div>
<p></p>

//注意一定要引入此文件,不然不可以用
<script src="jquery-1.11.3.js"></script>

<script>




    
   






    $.fn.myLazyload=function (callback) {
        function scroll() {
            if(window.pageXOffset!=undefined){
                return{
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }else{
                return{
                    left:document.documentElement.scrollLeft,
                    top:document.documentElement.scrollTop
                }
            }

        }
        function getClient() {
            if(window.innerWidth!=undefined){
                return{
                    width:window.innerWidth,
                    height:window.innerHeight
                }
            }else{
                return{
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeight
                }
            }

        }
        var _this=this;
        var boo=true;
        function myevent() {

            var min=_this.offset().top-getClient().height;
            var max=_this.offset().top+_this[0].scrollHeight;

            if(scroll().top>min && scroll().top<max){
                if(typeof callback=="function" && boo){
                    callback();
                    boo=false

                }

            }


        }
       // 页面滚动执行一次
       window.addEventListener("scroll",myevent);
       // 页面加载完成后执行一次
       window.addEventListener("load",myevent);





    }


   $("#box").myLazyload(function () {
       console.log("调用ajax");

   })





</script>







</body>
</html>