微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

图片懒加载插件实战

2016-08-15 21:03 伯乐专栏\/陈被单

(点击上方公众号,可快速关注)

作者:伯乐在线专栏作者 - 陈被单

链接:http://web.jobbole.com/87282/

点击 → 了解如何加入专栏作者


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


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


比如一个页面中有很多图片,如淘宝首页等等,一个页面有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顶部-滚动条滚动的距离)


实现原理:

  1. 首先从所有相关元素中找出需要延时加载的元素,放在element_obj数组中。


function initElementMap() {

      var el = document.getElementsByTagName('img');

      for (var j = 0, len2 = el.length; j < len2; j++) {

  //判断当前的img是否加载过了,或者有lazy_src标志  [未完成]

          if (typeof (el[j].getAttribute("lazy_src"))) {

              element_obj.push(el[j]);

              download_count++;

          }

      }

}


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


function lazy() {

    if (!download_count) return;

    var innerHeight = getViewport();

    for (var i = 0, len = element_obj.length; i < len; i++) {

//得到图片相对document的距上距离

        var t_index = getElementViewTop(element_obj[i]);    

        if (t_index - getScrollTop() < innerHeight) {

            element_obj[i].src = element_obj[i].getAttribute("lazy-src");

            delete element_obj[i];

            download_count--;

        }

    }

}


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


window.onscroll = window.onload = function () {

    setTimeout(function () {

        lazy();

    }, 1000)

}


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


var lazyLoad = (function () {  

    function init() {

        initElementMap();

        lazy();

    };

    return {

        init: init    

    }

})();


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


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



专栏作者简介 ( 点击 → 加入专栏作者 


陈被单:简介还没来得及写 :)



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 我们为什么要尝试前后端分离 移动端样式小技巧 JavaScript 模块(2):模块打包 用 CSS3 绘制你需要的几何图形 JavaScript 防 http 劫持与 XSS
猜您喜欢 CIO如何引领信息化应用向纵深发展? 2016搜索网站七夕Logo大比拼 Android GC 那点事 UI界面设计师的2015-2020前途分析 「猫友信息平台」第一期