图片懒加载效果

作者: zkzhengmeng | 来源:发表于2019-07-12 15:44 被阅读0次

2017-02-19
图片懒加载效果
项目优化
JS
图片懒加载
图片懒加载
js 实现图片懒加载
图片懒加载和预加载
selenuim和phantonJs处理网页动态加载数据的爬取
懒加载和瀑布流

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>图片懒加载</title>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
    #lazyLoadImage img {
        width: 100%;
        height: auto ;
        border: 1px solid #CCCCCC;
        padding: 3px;
        float: left;
        margin: 10px 0;
        visibility: visible;
        opacity: 0.00;
        filter: alpha(opacity=0);
        -moz-opacity: 0.0;
    }
</style>
<body>
    <div id="lazyLoadImage">
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/21.jpg" />
        <img pic="http://cdn.jirengu.com/book.jirengu.com/img/22.jpg" />
    </div>
</body>
<script type="text/javascript">
    //页面第一次加载时
     $(function(){
        imgLazyLoad();//初始化
        $(document).scroll(imgLazyLoad); //当滚动条滚动时,扫描需要加载的div  
    });
    
    //扫描需要加载的div
    function imgLazyLoad(){
        $.each($("#lazyLoadImage img"),function(i,o){      
            //获取窗口高度    
            var windowHeight = $(window).height();  //  windowHeight = windowHeight/2; 设置滚动条在显示屏幕高度2分之1的时候加载图片
            //获取滚动条
            var scrollTop = $(document).scrollTop();
            //先判断是否是加载完的图片 跳出
            if($(o).attr("src")==$(o).attr("pic")){
                return true;
            }else if( $(o).offset().top<=(scrollTop+windowHeight)  && $(o).offset().top >= scrollTop ){//判断div是不是出在可见的位置
                if($(o).attr("pic") != undefined || $(o).attr("pic") != "undefined" ){
                    var ObjectSrc = $(o).attr("pic");
                    //把pic的值赋给src值
                    $(o).attr("src",ObjectSrc);
                    //css属性改为可见
                    $(o).css("visibility","visible");
                    //渐变时间和渐变值
                    $(o).fadeTo(1000,1.00);
                }
            }              
        });
    }
   
</script>
 
</html>