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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello MUI</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            #list {
                /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/
                margin-top: -1px;
            }
        </style>
    </head>
    <body>
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <img src="https://upload-images.jianshu.io/upload_images/1181204-3e4b42e1d2146ccd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" data-src="https://upload-images.jianshu.io/upload_images/5070211-b4120bdbd5933573.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/812/format/webp">
        <script src="https://wyb.hudongshequn.cn/addons/lywywl_ztb/resource/webapp/js/jQuery-2.1.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function isShow($el){
                var winH = $(window).height(),//获取窗口高度 
                scrollH = $(window).scrollTop(),//获取窗口滚动高度 
                top = $el.offset().top;//获取元素距离窗口顶部偏移高度
                if(top < scrollH + winH){
                    return true;//在可视范围
                }else{
                    return false;//不在可视范围
                } 
            }
            $(window).on('scroll', function(){
                checkShow(); //监听滚动事件
            }) 
             //checkShow(); 
             function checkShow(){//检查元素是否在可视范围内 
                 $('img').each(function(){
                     var $cur = $(this); 
                     /*if(!!isloaded($cur)){
                        return;
                     }*/
                     if (isShow($cur)) { 
                         setTimeout(function(){ 
                             showImg($cur); 
                         },300)//设置时间是为了更好的看出效果 
                     }; 
                }); 
            }
            function showImg($el){
                $el.attr('src', $el.attr('data-src'));
               // $cur.data('isloaded',true);
            }
        </script>
    </body>
    </html>
  • 相关阅读:
    Android 8.0编译过程
    Ubuntu下映射网络驱动器
    Android 指定调用已安装的某个“相机”App
    sendMessage 与 obtainMessage (sendToTarget)比较
    Linux tee命令
    Android P(9.0) userdebug版本执行adb remount失败
    adb shell get/setprop, setenforce...
    Bluedroid: 蓝牙协议栈源码剖析
    android o logcat read: unexpected EOF!
    Winform 打包 混淆 自动更新
  • 原文地址:https://www.cnblogs.com/lujiang/p/13207698.html
Copyright © 2011-2022 走看看