懒加载 

<!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>

 

posted @ 2020-06-29 14:06  6671  阅读(131)  评论(0)    收藏  举报