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>
  • 相关阅读:
    VMware WorkStation 用 VMTools 官方下载地址 windows-vmtools tools-windows
    LeetCode Golang 9.回文数
    CentOS6.5中配置Rabbitmq3.6.6集群方案
    python之lambda、filter、map、reduce的用法讲解
    跨主机容器之间通信实现方式:etcd+flanned
    mongo3.4安装
    centos 时区的更改 UTC TO CST
    Elasticsearch5安装
    docker1.*.*版本安装
    使用weave来实现多宿主机中的docker容器之间通信
  • 原文地址:https://www.cnblogs.com/vscss/p/5859509.html
Copyright © 2011-2022 走看看