实现移动端网页图片按需加载
实现移动端网页图片按需加载是什么意思呢，就是在可见区域内图片加载，不在的就不加载，使用默认图片，一般这种需求多用在移动端网页中。
1.步骤一
选取需要实现这种需求的容器中的所有图片，不在容器中的图片就不用管了。例如：
$('.container').find('img'); 2. 步骤二
什么样的操作时候来判断图片是否到达可见区域内呢？
一般我们会想到touchmove，这是错的，为什么呢？正常情况下，我们touchmove都是上划一下就松开，那么滚动也就一下，是正常的。但是当我们上划很多，由于“惯性”，touchend以后，滚动条还会继续滚动，那么这一段的滚动距离就是不可控了。
然后我们会想到scroll，这就对了，在这个container容器中监听scroll事件就好了。
3.步骤三
再就是实现这个判断了，什么时候我们认为图片到达了可见区域内。那就是：
图片本身的距离顶部的距离<=可见区域本身的高度+滚动的距离
例如，滚动的距离为0，图片本身的距离顶部的高度小于可见区域的高度图片就在视野内。
具体实现：
imgDelayLoad: function () { var img = $('.pic-list').find('img') , src = "" , windowHeightScrollTop = $(window).height() + document.body.scrollTop ; img.each(function(index, el) { src = $(this).attr("data-src"); if ( windowHeightScrollTop > (this.offsetTop + 200) ) { if (this.src.indexOf("logo1") > 0) { this.src = src; } } }); }, 可以看到上面我多加了一个200的值，这种情况依个人情况，我是为了体现的更明显。如果已经加载过的图片就不用再加载了。在scroll的向上的时候调用，向下的时候就没必要了，在这里我用了一个全局变量来标识，当然在进入这个页面的初始化的时候也要调用一次，也就是没有发生滚动事件的情况。
// 滚动监听 $(window).scroll(function (event){ if (me.isScrollUp) me.imgDelayLoad(); }); 正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
