威尼斯wns.9778官网 > 计算机教程 > 图片懒加载插件实战,加载插件实战

原标题:图片懒加载插件实战,加载插件实战

浏览次数:106 时间:2019-05-10

防抖优化

我们规定,若用户上拉高度大于500px那么就自动加载一次可视区内图片,这里我们用oldScrollTop记录上次上拉高度

lazyLoad() {
    // 如果上拉距离大于500px则自动加载
    if(this.$refs.lazy.scrollTop - this.oldScrollTop > 500) {
        this.loadImg();
        this.oldScrollTop = this.$refs.lazy.scrollTop; // 更新oldScrollTop
    } else {  // 如果向下拉但小于500px则防抖加载
        this.debounce(this.loadImg);
    }
}

图片懒加载插件实战,加载插件实战

很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片。于是心血来潮,决定自己手动写一下’图片懒加载‘插件。  

  • 使用这个技术有什么显著的优点?

比如一个页面中有很多图片,如淘宝首页等等,一个页面有100多的图片,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了。用户感觉这个页面就会很卡。

  • 懒加载原理:浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成loading图片地址(这样就只需请求一次)

等到一定条件(这里是页面滚动到一定区域),用实际存放img地址的laze-load属性的值去替换src属性,即可实现'懒加载'。

//即使img的src值为空,浏览器也会对服务器发送请求。所以平时做项目的时候,如果img没有用到src,就不要出现src这个属性 

 

  • 先上三个重要的知识点

1.获取屏幕可视窗口大小: document.documentElement.clientHeight 标准浏览器及低版本IE标准模式 document.body.clientHeight 低版本混杂模式 2.元素相对于文档document顶部

element.offsetTop

3.滚动条滚动的距离

document.documentElement.scrollTop   兼容ie低版本的标准模式 

document.body.scrollTop 兼容混杂模式;

 

滚动加载:当图片出现在可视区域时,动态加载该图片。 原理:当图片元素顶部是否在可视区域内,(图片相对于文档document顶部-滚动条滚动的距离)< 可视窗口大小,改变该img的src属性   实现原理: 1.首先从所有相关元素中找出需要延时加载的元素,放在element_obj数组中。

 1  function initElementMap() {
 2       var el = document.getElementsByTagName('img');
 3       for (var j = 0, len2 = el.length; j < len2; j  ) {
 4   //判断当前的img是否加载过了,或者有lazy_src标志  [未完成]
 5           if (typeof (el[j].getAttribute("lazy_src"))) {
 6               element_obj.push(el[j]);
 7               download_count  ;
 8           }
 9       }
10  }      

2.判断数组中的img对象,若满足条件,则改变src属性

 1 function lazy() {
 2     if (!download_count) return;
 3     var innerHeight = getViewport();
 4     for (var i = 0, len = element_obj.length; i < len; i  ) {
 5 //得到图片相对document的距上距离
 6         var t_index = getElementViewTop(element_obj[i]);     
 7         if (t_index - getScrollTop() < innerHeight) {
 8             element_obj[i].src = element_obj[i].getAttribute("lazy-src");
 9             delete element_obj[i];
10             download_count--;
11         }
12     }
13 }                    

3.滚动的时候触发事件,1000毫秒后执行lazy()方法。

1 window.onscroll = window.onload = function () {
2     setTimeout(function () {
3         lazy();
4     }, 1000)
5 }    

整部分代码位于闭包自执行函数中。相应的方法放在init中。

1 var lazyLoad = (function () {  
2     function init() {
3         initElementMap();
4         lazy();
5     };
6     return {
7         init: init    
8     }
9 })();    

 

  

 使用格式 :src填默认loading图片地址,真实的图片地址填在lazy-src属性里,切记需指定宽高。在外部调用  lazyLoad.init();

 全部的代码以及例子已经上传到github上了,地址是:https://github.com/beidan/lazeLoadImg,欢迎star。

 

http://www.bkjia.com/HTML5/1140310.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1140310.htmlTechArticle图片懒加载插件实战,加载插件实战 很多网站都会用到图片懒加载这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图...

下拉优化

当用户下拉的时候我们并不需要执行lazyLoad,因为我们之前的图片已经加载过了,所以可以修改一下lazyLoad

lazyLoad() {
    // 如果上拉距离大于500px则自动加载
    if(this.$refs.lazy.scrollTop - this.oldScrollTop > 500) {
        this.loadImg();
        this.oldScrollTop = this.$refs.lazy.scrollTop;
    } else if(this.$refs.lazy.scrollTop - this.oldScrollTop < 0) {  // 如果向下拉则不做操作
        return ;
    } else {  // 如果向下拉但小于500px则防抖加载
        this.debounce(this.loadImg);
    }
}

威尼斯wns.9778官网,图片懒加载

template:

<div @scroll="lazyLoad" ref="lazy">
    <img v-for="(src, index) in imgs" src="##" :dataSrc="src" :key="index">
    <!--more img-->
</div>

http请求

如果你学过计算机网络你就会知道,我们请求一个带有n张图片的html文件实际上会发送n 1次请求,因为在浏览器解析html的时候遇到了src,就会请求src后面的内容。

设想一下如果我们的页面有1000000张图片,那么如果等待这些图片响应成功并加载完时延是非常大的,而且图片的加载是同步的,加载时会阻塞浏览器继续向下解析,用户体验非常差。

那么我们可不可以让图片按需加载呢?当图片出现在可视区的时候再加载它而不是一开始就加载完全部图片。

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:图片懒加载插件实战,加载插件实战

关键词:

上一篇:复制命令(ROBOCOPY)

下一篇:没有了