神刀安全网

实现移动端网页图片按需加载

实现移动端网页图片按需加载是什么意思呢,就是在可见区域内图片加载,不在的就不加载,使用默认图片,一般这种需求多用在移动端网页中。

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();     });

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 实现移动端网页图片按需加载

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址