jQuery-Scrolling-Image-Implementierung prinzip_jquery

本文主要通过以下几方面来说明懒加载技术的原理，个人前端小菜，有错误请多多指出

一、什么是图片滚动加载？

　　通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

二、为什要使用这个技术？

　　比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。

　　因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。

三、怎么实现？

关键点如下：

      1、页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提高性能咯），一旦通过javascript设置了图片路径，浏览器才会送请求。有点按需分配的意思，你不想看，就不给你看，你想看了就给你看~

　　2、如何获取正真的路径，这个简单，现在正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

　　3、开始比较之前，先了解一些基本的知识，比如说如何获取某个元素的尺寸大小、滚动条滚动距离及偏移位置距离； 

1）屏幕可视窗口大小：对应于图中1、2位置处

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

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

2）浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离：也就是图中3、4处对应的位置；

　　　　原生方法：window.pagYoffset——IE9+及标准浏览器 || document.documentElement.scrollTop 兼容ie低版本的标准模式 || document.body.scrollTop 兼容混杂模式；

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

3）获取元素的尺寸：对应于图中5、6位置处；左边jquery方法，右边原生方法

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

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

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

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

注意：要使用原生的style.xxx方法获取属性，这个元素必须已经有内嵌的样式，如

;

Jika gaya css pada asalnya ditakrifkan melalui helaian gaya luaran atau dalaman, anda mesti menggunakan o.currentStyle[xxx] ||document.defaultView.getComputedStyle(0)[xxx] untuk mendapatkan nilai gaya

4) Dapatkan maklumat kedudukan elemen: sepadan dengan kedudukan 7 dan 8 dalam gambar

1) Mengembalikan jarak elemen berbanding bahagian atas dan kiri dokumen;

jQuery: Jarak antara elemen $(o).offset().top dengan bahagian atas dokumen dan jarak antara elemen $(o).offset().left dan tepi kiri dokumen

Asli: getoffsetTop(), terdapat arahan khusus tentang ketinggian, jadi saya akan mengabaikannya di sini;

Ngomong-ngomong, jarak mengimbangi elemen yang dikembalikan berbanding dengan elemen induk kedudukan pertama, perhatikan perbezaan dari jarak mengimbangi di atas

jQuery: position() mengembalikan objek, $(o).position().left = style.left, $(o).position().top = style.top;

4. Setelah mengetahui cara untuk mendapatkan saiz elemen dan jarak mengimbangi, soalan seterusnya ialah: Bagaimana untuk menentukan sama ada elemen telah masuk atau akan memasuki kawasan tetingkap visual? Berikut juga adalah gambar untuk menggambarkan masalah tersebut.

1) Kotak terbesar di luar ialah saiz halaman sebenar, kotak biru muda di tengah mewakili saiz elemen induk, objek 1~8 mewakili kedudukan sebenar elemen pada halaman arahan berikut dilakukan dalam arah mendatar!

　2) Jarak ofset (offsetLeft) sempadan kiri objek 8 berbanding dengan sempadan kiri halaman adalah lebih besar daripada jarak sempadan kanan unsur induk berbanding dengan sempadan kiri halaman masa, elemen itu boleh dibaca di luar elemen induk

　3) Sempadan kiri objek 7 melintasi sempadan kanan elemen induk Pada masa ini: jarak mengimbangi (offsetLeft) sempadan kiri objek 7 berbanding dengan sempadan kiri halaman adalah kurang daripada jarak. daripada sempadan kanan unsur induk berbanding dengan sempadan kiri halaman, jadi Objek 7 memasuki kawasan yang boleh dilihat unsur induk

　4) Pada kedudukan objek 6, jarak antara tepi kanan objek 5 dan tepi kiri halaman adalah lebih besar daripada jarak antara tepi kiri elemen induk dan tepi kiri halaman

　5) Apabila pada kedudukan objek 5, jarak antara tepi kanan objek 5 dan tepi kiri halaman adalah kurang daripada jarak antara tepi kiri elemen induk dan tepi kiri halaman; pada masa ini, boleh dinilai bahawa elemen berada di luar kawasan yang boleh dilihat unsur induk;

　6) Oleh itu, dua syarat mesti dipenuhi dalam arah mendatar untuk menunjukkan bahawa elemen berada dalam kawasan visual elemen induk, kedua-dua syarat mesti dipenuhi dalam arah menegak; di bawah untuk butiran

4. Kembangkan ke pemalam jquery

Penggunaan: $("selector").scrollLoad({ parameter diterangkan dalam kod })

(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);

Di atas adalah pengenalan terperinci kepada prinsip pelaksanaan menatal memuatkan imej Saya harap ia akan membantu pembelajaran semua orang.