<!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>
原文：https://www.cnblogs.com/lujiang/p/13207698.html