滚动加载图片,jQuery滚动加载图片实现原理
分类:计算机网络

本文主要透过以下几地点来注解懒加载本事的规律,个人前端小菜,有错误请多多提议

本文首要通过以下几上边来表明懒加载本事的原理,个人前端小菜,有错误请多多提议

一、什么是图形滚动加载?

一、什么是图表滚动加载?

  通俗的讲正是:当访问二个页面包车型地铁时候,先把img元素或是其余因素的背景图片路径替换到一张大小为1*1px图纸的门路(这样就只需乞请叁回),独有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片展现出来。那便是图形懒加载。

  通俗的讲正是:当访谈贰个页面包车型客车时候,先把img成分或是别的因素的背景图片路线替换到一张大小为1*1px图片的门路(那样就只需乞求叁遍),独有当图片出现在浏览器的可视区域内时,才设置图片正真的渠道,让图片展现出来。那正是图表懒加载。

二、为什要使用那些技巧?

二、为什要使用这么些技术?

  比方三个页面中有非常多图片,如Taobao、京东首页等等,假使一上来就发送这么多须求,页面加载就能够很悠久,假诺js文件都坐落了文书档案的最底层,恰巧页面的底部又依附那些js文件,那就不佳办了。更为丰富的是:一上来就发送百八二十一个央求,服务器或许就吃不消了(又不是唯有一四个人在拜见这几个页面)。

  举个例子二个页面中有为数相当的多图片,如Taobao、京东首页等等,即使一上来就发送这么多诉求,页面加载就可以很悠久,假使js文件都坐落了文书档案的最底层,恰巧页面的头顶又依据那一个js文件,那就不佳办了。更为充足的是:一上来就发送百捌13个央求,服务器大概就吃不消了(又不是独有一三个人在拜见这一个页面)。

  因而优点就很引人瞩目了:不只能够减轻服务器的下压力,何况能够让加载好的页面更加快地显以往顾客日前(客商体验好)。

  由此优点就很醒目了:不仅可以够缓慢化解服务器的压力,并且能够让加载好的页面更加快地呈今后用户前边(顾客体验好)。

三、怎么落实?

三、怎么落实?

关键点如下:

  关键点如下:

      1、页面中的img成分,若无src属性,浏览器就不会发出诉求去下载图片(也就一向不供给咯,也就巩固质量咯),一旦经过javascript设置了图片路线,浏览器才会送哀告。有一点点按需分配的野趣,你不想看,就不给你看,你想看了就给你看~

      1、页面中的img成分,若无src属性,浏览器就不会发出供给去下载图片(也就平昔不诉求咯,也就加强质量咯),一旦通过javascript设置了图片路径,浏览器才会送须求。有一点按需分配的乐趣,你不想看,就不给你看,你想看了就给您看~

  2、怎样获得正真的路子,那个大约,未来正真的路线存在成分的“data-url”(这几个名字起个温馨认知好记的就行)属性里,要用的时候就抽出来,再安装;

  2、如何获取正真的渠道,这些简单,现在正真的路线存在成分的“data-url”(这么些名字起个温馨认知好记的就行)属性里,要用的时候就抽出来,再安装;

  3、开端相比较前边,先明白部分中央的知识,举个例子说怎么着获得某些成分的尺寸大小、滚动条滚动距离及偏移地方距离; 

  3、初步相比较前面,先精通一些着力的知识,例如说什么得到有些成分的尺寸大小、滚动条滚动距离及偏移地方距离;  图片 1

1)显示器可视窗口大小:对应于图中1、2地方处

  1)显示屏可视窗口大小:对应于图中1、2地点处

    原生方法:window.innerHeight 规范浏览器及IE9+ || document.documentElement.clientHeight 标准浏览器及低版本IE规范模式 || document.body.clientHeight 低版本混杂方式

    原生方法:window.innerHeight 规范浏览器及IE9+ || document.documentElement.clientHeight 标准浏览器及低版本IE规范情势 ||

       jQuery方法: $(window).height()

           document.body.clientHeight 低版本混杂情势

2)浏览器窗口顶上部分与文书档案最上端之间的离开,也正是滚动条滚动的距离:也便是图中3、4处对应的岗位;

       jQuery方法: $(window).height() 

    原生方法:window.pagYoffset——IE9+及专门的学业浏览器 || document.documentElement.scrollTop 包容ie低版本的正规格局 || document.body.scrollTop 兼容混合格局;

  2)浏览器窗口最上端与文书档案最上端之间的相距,也正是滚动条滚动的相距:约等于图中3、4处对应的地点;

        jQuery方法:$(document).scrollTop();

    原生方法:window.pagYoffset——IE9+及规范浏览器 || document.documentElement.scrollTop 兼容ie低版本的行业内部方式 ||

3)获取成分的尺码:对应于图中5、6地方处;左侧jquery方法,左侧原生方法

         document.body.scrollTop 包容混合情势;

    $(o).width() = o.style.width;

        jQuery方法:$(document).scrollTop(); 

    $(o).innerWidth() = o.style.width+o.style.padding;

  3)获取成分的尺码:对应于图中5、6地点处;左边jquery方法,右侧原生方法

    $(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;

    $(o).width() = o.style.width; 

    $(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

    $(o).innerWidth() = o.style.width+o.style.padding;

留心:要利用原生的style.xxx方法获得属性,那个因素必须已经有内嵌的体裁,如<div style="...."></div>;

    $(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;

一旦原来是由其余界或内部样式表定义css样式,必需选拔o.currentStyle[xxx] ||document.defaultView.getComputedStyle(0)[xxx]来收获样式值

    $(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

4)获取成分的职位音信:对应与图中7、8地点处

    注意:要使用原生的style.xxx方法获得属性,那一个因素必须已经有内嵌的样式,如<div style="...."></div>;

    1)再次回到元素相对于文书档案document最上部、侧面的相距;

    固然原来是透过外界或内部样式表定义css样式,必须选择o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]来获取样式值

    jQuery:$(o).offset().top成分距离文书档案顶的相距,$(o).offset().left成分距离文档右侧缘的距离

  4)获取成分的职位新闻:对应与图中7、8地方处

    原生:getoffsetTop(),高程上有具体表达,那边就大体了;

    1)重临元素绝对于文书档案document最上部、左侧的相距;

      顺便提一下回来成分相对于第二个以固定的父元素的撼动距离,注意与地点偏移距的区别;

    jQuery:$(o).offset().top成分距离文书档案顶的相距,$(o).offset().left成分距离文书档案左侧缘的距离

        jQuery:position()再次回到贰个对象,$(o).position().left = style.left,$(o).position().top = style.top;

    原生:getoffsetTop(),高程上有具体表明,那边就忽略了;

  4、知道哪些收获成分尺寸、偏移距离后,接下去贰个主题材料正是:如何决断有个别元素走入恐怕将在步向可视窗口区域?上边也通过一张图来表明难点。

      顺便提一下回去成分相对于第一个以一定的父成分的舞狮距离,注意与地点偏移距的分别;

图片 2

        jQuery:position()重回三个指标,$(o).position().left = style.left,$(o).position().top = style.top;

    1)外面最大的框为实际页面包车型地铁轻重,中间藤黄色的框代表父成分的高低,对象1~8代表成分位于页面上的实际上地点;以水平方一直做如下表明!

  4、知道怎么着获得成分尺寸、偏移距离后,接下去二个主题素材就是:怎样剖断某些成分走入大概就要进入可视窗口区域?上边也通过一张图来表明难题。

    2)对象8左侧界绝对于页面左边界的舞狮距离(offsetLeft)大于父成分左边界相对于页面侧面界的偏离,此时可判读成分位于父成分之外;

图片 3

    3)对象7侧面界跨过了父成分侧面界,此时:对象7左边界相对于页面左边界的舞狮距离(offsetLeft)小于 父成分侧面界相对于页面左侧界的相距,因此对象7就进去了父成分可视区;

    1)外面最大的框为实际页面包车型大巴大小,中间海洋蓝色的框代表父成分的大小,对象1~8代表成分位于页面上的实在地点;以水平方向来做如下表达!

    4)在对象6的岗位处,对象5的左侧界与页面左边界的偏离 大于 父元素侧面界与页面左侧界的相距;

    2)对象8左侧界绝对于页面左侧界的撼动距离(offsetLeft)大于父成分左边界相对于页面左侧界的离开,此时可判读成分位于父成分之外;

    5)在目的5地点处时,对象5的侧边界与页面侧面界的相距 小于 父成分左侧界与页面侧面界的距离;此时,可看清元素处于父成分可视区外;

    3)对象7侧面界跨过了父成分侧面界,此时:对象7左侧界相对于页面左侧界的撼动距离(offsetLeft)小于 父成分侧边界相对于

    6)由此水平方向必得买足八个条件,才具证实成分位于父成分的可视区内;同理垂直方向也无法不满意五个尺码;具体见下文的源码;

      页面左侧界的偏离,由此对象7就步向了父成分可视区;

四、扩展为jquery插件
利用方法:$("selector").scrollLoad({ 参数在代码中有表明 })

    4)在指标6的职责处,对象5的侧边界与页面左侧界的相距 大于 父成分右侧界与页面左边界的离开;

(function($) {
 $.fn.scrollLoading = function(options) {
 var defaults = {
  // 在html标签中存放的属性名称;
  attr: "data-url",
  // 父元素默认为window
  container: window,
  callback: $.noop
 };
 // 不管有没有传入参数,先合并再说;
 var params = $.extend({}, defaults, options || {});
 // 把父元素转为jquery对象;
 var container = $(params.container);
 // 新建一个数组,然后调用each方法,用于存储每个dom对象相关的数据;
 params.cache = [];
 $(this).each(function() {
  // 取出jquery对象中每个dom对象的节点类型,取出每个dom对象上设置的图片路径
  var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
  //重组,把每个dom对象上的属性存为一个对象;
  var data = {
  obj: $(this),
  tag: node,
  url: url
  };
  // 把这个对象加到一个数组中;
  params.cache.push(data);
 });

 var callback = function(call) {
  if ($.isFunction(params.callback)) {
  params.callback.call(call);
  }
 };

 //每次触发滚动事件时,对每个dom元素与container元素进行位置判断,如果满足条件,就把路径赋予这个dom元素!
 var loading = function() {
  // 获取父元素的高度
  var contHeight = container.outerHeight();
  var contWidth = container.outerWidth();

  // 获取父元素相对于文档页顶部的距离,这边要注意了,分为以下两种情况;
  if (container.get(0) === window) {
  // 第一种情况父元素为window,获取浏览器滚动条已滚动的距离;$(window)没有offset()方法;
  var contop = $(window).scrollTop();
  var conleft = $(window).scrollLeft();
  } else {
  // 第二种情况父元素为非window元素,获取它的滚动条滚动的距离;
  var contop = container.offset().top;
  var conleft = container.offset().left;
  }

  $.each(params.cache, function(i, data) {
  var o = data.obj, tag = data.tag, url = data.url, post, posb, posl, posr;
  if (o) {
   //对象顶部与文档顶部之间的距离,如果它小于父元素底部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
   post = o.offset().top - (contop + contHeight);
   //对象底部与文档顶部之间的距离,如果它大于父元素顶部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
   posb = o.offset().top + o.height() - contop;

   // 水平方向上同理;
   posl = o.offset().left - (conleft + contWidth);
   posr = o.offset().left + o.width() - conleft;

   // 只有当这个对象是可视的,并且这四个条件都满足时,才能给这个对象赋予图片路径;
   if ( o.is(':visible') && (post < 0 && posb > 0) && (posl < 0 && posr > 0) ) {
   if (url) {
    //在浏览器窗口内
    if (tag === "img") {
    //设置图片src
    callback(o.attr("src", url));
    } else {
    // 设置除img之外元素的背景url
    callback(o.css("background-image", "url("+ url +")"));
    }
   } else {
    // 无地址,直接触发回调
    callback(o);
   }
   // 给对象设置完图片路径之后,把params.cache中的对象给清除掉;对象再进入可视区,就不再进行重复设置了;
   data.obj = null;
   }
  }
  });
 };
 //加载完毕即执行
 loading();
 //滚动执行
 container.bind("scroll", loading);
 };
})(jQuery);

    5)在目的5位置处时,对象5的左侧界与页面侧边界的偏离 小于 父元素右边界与页面侧面界的相距;此时,可判别成分处于父成分可视区外;

正文已被收拾到了《jquery图片加载方法汇总》,招待大家学习阅读。

    6)因而水平方向必需买足多个条件,技巧声明成分位于父成分的可视区内;同理垂直方向也不能够不满足多少个尺码;具体见下文的源码;

如上正是滚动加载图片达成原理的详实内容介绍,希望对大家的求学抱有帮助。

四、扩展为jquery插件

你只怕感兴趣的篇章:

  • jquery实现图片预加载
  • JQuery落成Ajax加载图片的艺术
  • jQuery 推断图片是还是不是加载成功措施汇总
  • jquery显示loading图片直到网页加载成功的办法
  • jQuery管理图片加载战败的常用方法
  • jQuery简单兑现图片预加载
  • jQuery达成预加载图片的不二法门
  • jquery完成在页面加载实现后获得图片中度或宽度
  • 依附jquery完成图片相关操作(重绘、获取尺寸、调解大小、缩放)
  • jquery达成基于浏览器窗口大小活动缩放图片的不二等秘书籍
  • 运用jQuery完成认证上传图片的格式与大小
  • 依据jquery达成的上传图片及图片大小验证、图片预览效果代码
  • jQuery完毕图片加载成功后改造图片大小的艺术

  使用格局:$("selector").scrollLoad({ 参数在代码中有表明 })

(function($) {
    $.fn.scrollLoading = function(options) {
        var defaults = {
            // 在html标签中存放的属性名称;
            attr: "data-url",
            // 父元素默认为window
            container: window,
            callback: $.noop
        };
        // 不管有没有传入参数,先合并再说;
        var params = $.extend({}, defaults, options || {});
        // 把父元素转为jquery对象;
        var container = $(params.container);
        // 新建一个数组,然后调用each方法,用于存储每个dom对象相关的数据;
        params.cache = [];
        $(this).each(function() {
            // 取出jquery对象中每个dom对象的节点类型,取出每个dom对象上设置的图片路径
            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
            //重组,把每个dom对象上的属性存为一个对象;
            var data = {
                obj: $(this),
                tag: node,
                url: url
            };
            // 把这个对象加到一个数组中;
            params.cache.push(data);
        });

        var callback = function(call) {
            if ($.isFunction(params.callback)) {
                params.callback.call(call);
            }
        };

        //每次触发滚动事件时,对每个dom元素与container元素进行位置判断,如果满足条件,就把路径赋予这个dom元素!
        var loading = function() {
            // 获取父元素的高度
            var contHeight = container.outerHeight();
            var contWidth = container.outerWidth();

            // 获取父元素相对于文档页顶部的距离,这边要注意了,分为以下两种情况;
            if (container.get(0) === window) {
                // 第一种情况父元素为window,获取浏览器滚动条已滚动的距离;$(window)没有offset()方法;
                var contop = $(window).scrollTop();
                var conleft = $(window).scrollLeft();
            } else {
                // 第二种情况父元素为非window元素,获取它的滚动条滚动的距离;
                var contop = container.offset().top;
                var conleft = container.offset().left;
            }

            $.each(params.cache, function(i, data) {
                var o = data.obj, tag = data.tag, url = data.url, post, posb, posl, posr;
                if (o) {
                    //对象顶部与文档顶部之间的距离,如果它小于父元素底部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
                    post = o.offset().top - (contop + contHeight);
                    //对象底部与文档顶部之间的距离,如果它大于父元素顶部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
                    posb = o.offset().top + o.height() - contop;

                    // 水平方向上同理;
                    posl = o.offset().left - (conleft + contWidth);
                    posr = o.offset().left + o.width() - conleft;

                    // 只有当这个对象是可视的,并且这四个条件都满足时,才能给这个对象赋予图片路径;
                    if ( o.is(':visible') && (post < 0 && posb > 0) && (posl < 0 && posr > 0) ) {
                        if (url) {
                            //在浏览器窗口内
                            if (tag === "img") {
                                //设置图片src
                                callback(o.attr("src", url));
                            } else {
                                // 设置除img之外元素的背景url
                                callback(o.css("background-image", "url("+ url +")"));
                            }
                        } else {
                            // 无地址,直接触发回调
                            callback(o);
                        }
                        // 给对象设置完图片路径之后,把params.cache中的对象给清除掉;对象再进入可视区,就不再进行重复设置了;
                        data.obj = null;
                    }
                }
            });
        };
        //加载完毕即执行
        loading();
        //滚动执行
        container.bind("scroll", loading);
    };
})(jQuery);

 

五、参考:

  1、jQuery.lazyload详解

  2、张大大:

  3、Jquery图片延迟加载插件jquery.lazyload. 
  4、jQuery.lazyload完成延时加载详解步骤 
  5、jquery lazyload延迟加载手艺的实现原理解析 

  6、Lazyload 延迟加载效果

  7、图形延迟加载(lazyload)的兑现原理

 

                         

本文由正版必中一肖图发布于计算机网络,转载请注明出处:滚动加载图片,jQuery滚动加载图片实现原理

上一篇:的小游戏,js贪吃蛇游戏达成思路和源码 下一篇:提高性能,JavaScript文档碎片操作实例分析
猜你喜欢
热门排行
精彩图文