用IntersectionObserver來做圖片懶

用IntersectionObserver來做圖片懶加載

端開發中經常會遇到圖片懶加載的需求，也是性能優化的一部分。具體說來就是某個位置的圖片快要滑動到可視區域（或指定容器）的時候，再去加載圖片的內容。

過?去，要檢測一個元素是否可見或者兩個元素是否相交并不容易，很多解決辦法不可靠或性能很差。如果用js去實現的話，不僅復雜，而且性能得不到保證，因為滾動事件觸發的回調太多了。今天我們介紹Intersection Observer API，能夠十分快速簡單的實現“元素可視檢測”。廢話不多說，先看個效果：

Intersection Observer

從上圖中可以看到，元素即將進入外部container的可視區時，會觸發一個事件。再結合我們前面提到的圖片懶加載功能，是不是感覺一拍即合？圖中的顏色塊可以替換為圖片，未進入可視區時，先用一個div占位，等到即將進入可視區時，再在回調函數里將img寫入。

這樣的功能需要多少代碼量呢？

intersection observer

你沒看錯，就這么簡單。下面我們來解析一下Intersection Observer：

首先，我們要創建一個觀察者對象：IntersectionObserver，用來觀察子元素的位置，這個對象接收兩個參數：被觀察者可視狀態變化的回調函數，觀察者的配置選項。

Observer的配置選項有：

root：根元素，被觀察者的參考目標，必須是被觀察者的父級元素。如果沒有指定具體的dom，則默認為瀏覽器視窗。
rootMargin：根元素的外邊距。類似于 CSS 中的margin屬性。該屬性值是用作root元素和target發生交集時候的計算交集的區域范圍，使用該屬性可以控制root元素每一邊的收縮或者擴張。默認值為0。
threshold：被觀察者和觀察者的相交程度，達到這個程度的時候觸發回調函數。取值范圍是0-1，為1時代表完全出現在被觀察者中，才觸發回調函數。

定義好observer后，使用observer.observe來綁定被觀察者。

回調函數有兩個參數，可視狀態發生變化的元素集合（IntersectionObserverEntry）和觀察者，重點了解一下IntersectionObserverEntry對象的屬性isIntersecting。代表可視狀態，值為true或false。出現在IntersectionObserverEntry中就代表元素的狀態將發生變化，如果isIntersecting是false，則表示元素即將從可視區中消失；如果時true，則代表元素即將出現在可視區域。

總的來說，IntersectionObserver是一個十分有用的API，圖片懶加載只是它的一個場景，只要是需要判斷一個元素是否被用戶看見、是否出現在某個位置，都可以用它來實現。唯一的問題是，瀏覽器的支持還不是100%。

IntersectionObserver瀏覽器支持

機頁面的滑動加載功能

下載地址：http://www.xwcms.net/js/bddm/39369.html

演示地址：http://www.xwcms.net/webAnnexImages/fileAnnex/201607/48731/index.html

下載

css -樣式文件

images -圖片

lib -所需js在里面

index.html -demo頁面

我們主要需要它的樣式文件dropload.css 和js 文件 dropload.js

頁面引入

dropload.css

dropload.js

jquery-2.2.3.min.js

參考khData.js 編寫代碼即可

主要是這里

var dropload=$('.khfxWarp').dropload({
scrollArea: window,
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">上拉加載更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
domNoData: '<div class="dropload-noData">已無數據</div>'
},
loadDownFn: function (me) {
setTimeout(function () {
//ajax 加載數據編寫你的代碼
me.resetload();
}, 500);
}
});
沒有數據調用
me.resetload();
me.lock();
me.noData();
me.resetload();
return;

--end

果圖

各位老鐵，大家好！

今天俺給大兄弟、大妹子們帶來的是 jQuery全屏焦點圖滑動切換源碼

全屏滑動，屬于暗黑炫酷系列！(適合高科技產品的展示)

若是想要文件源碼，請看評論區！

廢話不多說，上源碼！

CSS源碼：

@charset "utf-8";

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% "Arial","微軟雅黑";color:#666666;background-color:#ffffff;}

a,a:hover{color:#666666;text-decoration:none;border:0px;}

/* focusBar */

#focusBar{width:100%;height:644px;clear:both;position:relative;background:#242424;overflow:hidden;}

#focusBar li{width:100%;clear:both;height:644px;display:none;position:absolute;/* position:relative;*/}

#focusBar .focusL{height:644px;position:absolute;z-index:9;/*left:-1000px;*/ top:0px;left:-500px;margin-left:50%;}

#focusBar .focusR{height:644px;position:absolute;z-index:19;/* right:1000px;*/top:0px;left:-500px;margin-left:50%;}

a.arrL,a.arrR{display:block;width:52px;height:134px;position:absolute;top:250px;z-index:99;cursor:pointer;background:url(../images/bt_arr.png) no-repeat;}

a.arrL{left:-52px;background-position:0px 0px;}

a.arrR{right:-52px;background-position:-68px 0px;}

a.arrL:hover{background-position:0px -144px;}

a.arrR:hover{background-position:-68px -144px;}

/*HTML5特效庫 jQuery全屏焦點圖滑動切換源碼 */

JS源碼：

* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

* Uses the built in easing capabilities added In jQuery 1.1

* to offer multiple easing options

* TERMS OF USE - jQuery Easing

* Open source under the BSD License.

* Copyright ? 2008 George McGinley Smith

* Redistribution and use in source and binary forms, with or without modification,

* are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this list of

* conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice, this list

* of conditions and the following disclaimer in the documentation and/or other materials

* provided with the distribution.

* Neither the name of the author nor the names of contributors may be used to endorse

* or promote products derived from this software without specific prior written permission.

* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

* OF THE POSSIBILITY OF SUCH DAMAGE.

// t: current time, b: begInnIng value, c: change In value, d: duration

jQuery.easing['jswing']=jQuery.easing['swing'];

jQuery.extend( jQuery.easing,

{

def: 'easeOutQuad',

swing: function (x, t, b, c, d) {

//alert(jQuery.easing.default);

return jQuery.easing[jQuery.easing.def](x, t, b, c, d);

easeInQuad: function (x, t, b, c, d) {

return c*(t/=d)*t + b;

easeOutQuad: function (x, t, b, c, d) {

return -c *(t/=d)*(t-2) + b;

easeInOutQuad: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t + b;

return -c/2 * ((--t)*(t-2) - 1) + b;

easeInCubic: function (x, t, b, c, d) {

return c*(t/=d)*t*t + b;

easeOutCubic: function (x, t, b, c, d) {

return c*((t=t/d-1)*t*t + 1) + b;

easeInOutCubic: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t + b;

return c/2*((t-=2)*t*t + 2) + b;

easeInQuart: function (x, t, b, c, d) {

return c*(t/=d)*t*t*t + b;

easeOutQuart: function (x, t, b, c, d) {

return -c * ((t=t/d-1)*t*t*t - 1) + b;

easeInOutQuart: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

return -c/2 * ((t-=2)*t*t*t - 2) + b;

easeInQuint: function (x, t, b, c, d) {

return c*(t/=d)*t*t*t*t + b;

easeOutQuint: function (x, t, b, c, d) {

return c*((t=t/d-1)*t*t*t*t + 1) + b;

easeInOutQuint: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

return c/2*((t-=2)*t*t*t*t + 2) + b;

easeInSine: function (x, t, b, c, d) {

return -c * Math.cos(t/d * (Math.PI/2)) + c + b;

easeOutSine: function (x, t, b, c, d) {

return c * Math.sin(t/d * (Math.PI/2)) + b;

easeInOutSine: function (x, t, b, c, d) {

return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;

easeInExpo: function (x, t, b, c, d) {

return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;

easeOutExpo: function (x, t, b, c, d) {

return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;

easeInOutExpo: function (x, t, b, c, d) {

if (t==0) return b;

if (t==d) return b+c;

if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;

return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;

easeInCirc: function (x, t, b, c, d) {

return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

easeOutCirc: function (x, t, b, c, d) {

return c * Math.sqrt(1 - (t=t/d-1)*t) + b;

easeInOutCirc: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;

return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;

easeInElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s=p/(2*Math.PI) * Math.asin (c/a);

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

easeOutElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s=p/(2*Math.PI) * Math.asin (c/a);

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

easeInOutElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s=p/(2*Math.PI) * Math.asin (c/a);

if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

easeInBack: function (x, t, b, c, d, s) {

if (s==undefined) s=1.70158;

return c*(t/=d)*t*((s+1)*t - s) + b;

easeOutBack: function (x, t, b, c, d, s) {

if (s==undefined) s=1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

easeInOutBack: function (x, t, b, c, d, s) {

if (s==undefined) s=1.70158;

if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

easeInBounce: function (x, t, b, c, d) {

return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;

easeOutBounce: function (x, t, b, c, d) {

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

} else {

return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

}

easeInOutBounce: function (x, t, b, c, d) {

if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;

return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;

}

});

* TERMS OF USE - EASING EQUATIONS