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