zoukankan      html  css  js  c++  java
  • 延时加载图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    ul,li{
        list-style: outside none none;
    }
    .box{
        width: 600px;
        margin: 0 auto;
    }
    .box li{
        margin: 40px 0;
        width: 100%;
        height: 170px;
        background: #ddd;
    }
    .box li img{
        width: 100%;
    }
    </style>
    </head>
    <body>
    <div class="box">
        <ul>
            <li><img x-src="img/1.jpg" alt=""></li>
            <li><img x-src="img/2.jpg" alt=""></li>
            <li><img x-src="img/3.jpg" alt=""></li>
            <li><img x-src="img/4.jpg" alt=""></li>
            <li><img x-src="img/5.jpg" alt=""></li>
            <li><img x-src="img/1.jpg" alt=""></li>
            <li><img x-src="img/2.jpg" alt=""></li>
            <li><img x-src="img/3.jpg" alt=""></li>
            <li><img x-src="img/4.jpg" alt=""></li>
            <li><img x-src="img/5.jpg" alt=""></li>
            <li><img x-src="img/1.jpg" alt=""></li>
            <li><img x-src="img/2.jpg" alt=""></li>
            <li><img x-src="img/3.jpg" alt=""></li>
            <li><img x-src="img/4.jpg" alt=""></li>
            <li><img x-src="img/5.jpg" alt=""></li>
            <li><img x-src="img/1.jpg" alt=""></li>
            <li><img x-src="img/2.jpg" alt=""></li>
            <li><img x-src="img/3.jpg" alt=""></li>
            <li><img x-src="img/4.jpg" alt=""></li>
            <li><img x-src="img/5.jpg" alt=""></li>
            <li><img x-src="img/1.jpg" alt=""></li>
            <li><img x-src="img/2.jpg" alt=""></li>
            <li><img x-src="img/3.jpg" alt=""></li>
            <li><img x-src="img/4.jpg" alt=""></li>
            <li><img x-src="img/5.jpg" alt=""></li>
        </ul>
    </div>
    
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            function showImg(){
                $('img').each(function(index,ele){
                    if($(this).offset().top<$(window).height()+$(window).scrollTop()){
                        var oSrc = $(this).attr('x-src');
                        $(this).attr('src',oSrc);
                    }
                })
            }
            showImg();
            $(window).scroll(function(){
                showImg();
            });
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    洛谷 P2677 超级书架 2 题解
    洛谷 P3957 跳房子 二分+DP检验+单调队列优化
    BZOJ 1030 AC自动机+DP
    SPOJ-EPALIN 字符串哈希 回文
    URAL-1989 树状数组+字符串哈希
    POJ-2774 字符串哈希+二分
    CCF 201709-5 除法(线段树)
    CCF CSP个人题解汇总
    CCF CSP历年一二题代码汇总
    CCF 201803-4 棋局评估 (对抗搜索)
  • 原文地址:https://www.cnblogs.com/vscss/p/5859509.html
Copyright © 2011-2022 走看看