zoukankan      html  css  js  c++  java
  • 懒加载

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>懒加载</title>
    </head>
    <script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        .hover_content{ width:270px; height:129px; }
        img{ width:100%; height:129px; }
    </style>
    <script>
        function scanLoad(){//扫描需要加载的div
    
            $.each($(".hover_content"),function(i,o){
                var windowHeight=$(window).height();
                var scrollTop=$(document).scrollTop();
                windowHeight=windowHeight;//测试当图片出现在窗口上半部分时显示,实际操作中,应该不要除以2的
                if( $(o).offset().top<(scrollTop+windowHeight) && $(o).offset().top > scrollTop ) {  //判断div是不是出在可见的位置
                    var img=$("<img/>").attr("src",$(o).attr("pic")).fadeTo("fast",0);//创建一个可见度为0的图片,地址为div上面的pic属性
                    $(o).replaceWith(img);//把div替换成这个新创建的图片
                    img.fadeTo("slow",1);//让它慢慢的显示出来
                }
            });
        }
        $(function(){//页面第一次加载时
            scanLoad();//扫描需要加载的div
            $(document).scroll(scanLoad);//当滚动条滚动时,扫描需要加载的div
            $("body").scroll(scanLoad);//加这个为了某些浏览器的兼容
            $(window).scroll(scanLoad);//加这个也是为了某些浏览器的兼容
        });
    </script>
    <body>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
            <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div>
    </body>
    
    </html>

    效果图:(滚轮到某区域,才显示某区域的内容)

  • 相关阅读:
    Layui 两个table 人员选择 多选
    iphone7 忘记密码 重装系统
    使用hql-统计连续登陆的三天及以上的用户
    azkaban群起/群停脚本
    Hive读取索引文件问题:select * 和select count(*)读取出来的行数不一致
    scala/java等其他语言从CSV文件中读取数据,使用逗号','分割可能会出现的问题
    hadoop3.1.3版本的secondaryNamenode的web界面不能显示的问题?
    启动kafka消费报错:WARN [Consumer clientId…] 1 partitions have leader brokers without a matching listener,…
    centos6和centos7的防火墙命令,以及它们的区别是是什么?
    kafka项目经验之如何进行Kafka压力测试、如何计算Kafka分区数、如何确定Kaftka集群机器数量
  • 原文地址:https://www.cnblogs.com/heyiming/p/6739749.html
Copyright © 2011-2022 走看看