延迟加载图片

首先有一个问题

src和href属性都用来包含一些外部的实体,那么有什么区别?

src:source用于替代元素(replaced elements简而言之,就是外观和尺寸由外部资源来定义,有img,button,textarea,input,select,object)。
href:Hypertext Reference,指定了web资源的定位。因此定义了一个连接或者现在元素之间的关系(比如锚和目的地),或者是当前文档(比如link标签)和属性定位的资源间的关系。
所以我们这样写
<link href="style.css" rel="stylesheet" />
浏览器就能够理解这是一个样式表,而且解析(parse)页面的时候不会中断(但是可能因为浏览器需要依据样式来绘制渲染界面而中断渲染render)。跟把所有css文件倒到style标签不一样。因此也建议用link,不要用 @import来导样式表 。

src属性只是在当前的文本元素定义的地方嵌套了一个资源。
例如当浏览器看到
<script src="script.js"></script>
页面的下载和处理会被终止,直到浏览器获取,编译,执行了文件。类似于把所有的js文件都倾倒在script标签里。img标签也是类似的。只是一个空标签,内容由src定义,浏览器会暂停加载,直到获取和加载完图像。
这也是为什么要把js文件放在body的最后的原因。
参考来自http://stackoverflow.com/ques…


想到了一个有意思的实现。
先不给img标签加上src,直到浏览到了这个位置再加载。对于移动端,还能省流量。

所以来实现一下。
第一个问题在于获取图片距离可见范围下边的距离。
几个尺寸属性参考http://www.jianshu.com/p/187c…
先获取元素距离上边的距离,再获取屏幕可用高度,以及滑动高度。
从而得到距离视图下方的高度。

第二个问题在于节流,总不能每滑动一下都执行一遍。有两个实现。同步和异步的方式各实现了。

handleScroll=(callback)=>{
        let previousCall=new Date().getTime();
        return (e=>{
            let diff=new Date().getTime()-previousCall
            if(diff>INTERVAL){
                callback.apply(null,arguments);
                previousCall=new Date().getTime();
            }
        })
    }
window.addEventListener('scroll',handleScroll(checkImgs));
//或者
let wait=false;
ontimeLoad=(e)=>{
    if(!wait){
      wait=true;
      setTimeout(function(){
        wait=false;
        checkImgs();
      },10);
    }
}
window.addEventListener('scroll',ontimeLoad);

不过第一种的话有个问题,就是不能removeEventListener了

IT文库 » 延迟加载图片
分享到: 更多 (0)

评论 抢沙发

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