千寻前端

简单高效实现一个按需加载图片的逻辑

2019-08-02 02:54:20javascriptjs

需求：
根据页面滚动，当图片进入视野，就开始加载，否则不加载任何图片。

//页面加载完成时先调用一下，首屏内的图片。
loadImg();
document.addEventListener('scroll', function(e) {
    //跟着滚动，继续加载剩下的图片
    loadImg()
})

function loadImg(){
     //slice可以将类数组转化成数组对象
    [].slice.call(document.querySelectorAll('[data-src]')).forEach(function(item) {
        // 判断元素是否已经进入视野
        if (item.getBoundingClientRect().y<=innerHeight) {
            //设置src
            item.src = item.getAttribute('data-src');
            //删除data-src属性，可以减少querySelectorAll的查询次数
            item.removeAttribute('data-src');
        }
    })
}


<img data-src="简单高效实现一个按需加载图片的逻辑_/xxx.png">

代码简单，却很通用，很实用。方便扩展

热门评论：

  • 沙漠西葫芦 沙漠西葫芦 2019-8-2 7:06 回复:

    你这个代码存在多个问题：
    1、 滚动事件频率太快，未控制节流
    2、ios机型你没有考虑滑动后的惯性移动并不会触发scroll，必须增加mouseover，并且在滚动过程中ios禁止任何DOM操作。
    3、图片需要给定默认高度。
    4、代码报错，innerHeight未定义
    5、想法没问题，进入视野加载图片，在pc端适用较多。移动端还是以预加载为主。

    • luofeii luofeii 2019-8-4 10:59 回复:沙漠西葫芦

      1应该是防抖

    • jsoncode jsoncode 2019-8-9 3:51 回复:沙漠西葫芦
      谢谢宝贵意见，我有一些疑问和回答如下：
      1，你有什么好的节流方案？给点意见。
      2，ios惯性移动不会触发，但是滚动停止后，会马上触发，满足我需求。
      3，图片怎么展示，是个体需求问题，不是我标题要解决的问题。
      4，代码innerHeight？帮忙提供一下你的设备和浏览器版本，方便我调试一下。
      5，想法没问题，那是什么问题？不适合移动端？我有没有说用于移动端吧？

以上1,4是我疑问。为了给大家提供更多方便，你能提供一下帮助吗？

以上：有时候提问题谁都会，难得是解决问题。不管方案多低级，只要能解决实际问题，就是好方案，不是吗。