zoukankan      html  css  js  c++  java
  • 延时加载效果的实现

    js代码:
    <script type="text/javascript"> $(function(){ var aLazy = $('.lazy'); aLazy.each(function(i){ $(this).attr({ "opacity":0 }); }); function getSrc(){ aLazy.each(function(i){ $(this).attr('src',$(this).attr('data-original')).animate({ "opacity":1 }); }); }; function int(){ var oScrH = $(document).scrollTop(); aLazy.each(function(i){ var oEleTop = $(this).offset().top; if(oScrH+oWinH>oEleTop) { setTimeout(function(){ getSrc(); },200); } }); }; var oWinH = $(window).height(); $(window).bind('scroll',int) }); </script>
    html代码:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>延时加载</title>
        <link rel="stylesheet" type="text/css" href="index.css" />
    </head>
    <body>
    <div id="main">
        <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
        <div id="photo">
            <dl>
                <dt><img data-original="images/p1.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p2.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p3.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p4.jpg" src="images/110.gif" class="lazy" alt="" /></dt>>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p5.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p6.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
    
            <dl>
                <dt><img data-original="images/p7.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p8.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p9.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p10.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p11.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
            
            <dl>
                <dt><img data-original="images/p12.jpg" src="images/110.gif" class="lazy" alt="" /></dt>
                <dd>延时加载</dd>
            </dl>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    Arthas线上问题排查
    如何快速增加pdf书签,解除pdf限制
    数组指针——指向数组的指针(通过指针控制数组)
    指针和数组直接对应关系之如何记忆
    C/C++语言中指针数组和数组指针比较区别
    int最大值+1为什么是-2147483648最小值-1为什么是2147483647
    电脑进行二进制加减运算方法
    C/C++语言中的函数参数传参三种对比
    Python基于VS2013 开发环境搭建 Hello World 10分钟搞定
    算法的复杂度包括时间复杂度和空间复杂度分别如何计算?
  • 原文地址:https://www.cnblogs.com/vscss/p/5743825.html
Copyright © 2011-2022 走看看