이미지의 지연 로딩 및 jquery.lazyload.js의 사용 예
- 零下一度원래의
- 2017-06-26 10:35:281195검색
프로젝트에서 이미지 지연 로딩이 가끔 사용되는데, 지연 로딩의 이점은 무엇인가요?
두 가지 주요 사항이 있다고 생각합니다. 첫 번째는 큰 이미지가 많이 포함된 긴 페이지에서 이미지 로딩을 지연시키는 것이 페이지 로딩 속도를 높일 수 있다는 것입니다. 두 번째는 서버의 부하를 줄이는 데 도움이 된다는 것입니다.
다음에서는 일반적으로 사용되는 지연 로딩 플러그인 jquery.lazyload.js와 지연 로딩 플러그인 구현 방법을 소개합니다.
1: jquery.lazyload.js 플러그인
lazyload는 jQuery로 작성된 지연 로딩 플러그인입니다. 브라우저의 표시 영역 외부에 있는 이미지는 사용자가 페이지를 해당 위치로 스크롤할 때까지 로드되지 않습니다. . 이는 이미지와 유사합니다. 사전 로드는 정확히 반대 방식으로 처리됩니다.
구현 원리
첫째, 선택한 img 요소는 표시 이벤트(img를 처리하여 실제 이미지 주소를 표시하는 작업)에 바인딩되므로 향후 조건이 충족될 때 이벤트가 트리거될 수 있습니다. 구성 개체의 컨테이너 속성 구성은 기본적으로 window입니다. img 요소가 컨테이너 컨테이너 뷰포트에 있으면 나타나는 이벤트가 트리거됩니다.
img 요소가 컨테이너 컨테이너 뷰포트 범위에 있는지 확인하려면 다음이 필요합니다.
$.belowthefold = function(element, settings) {}; // 在视口下方$.rightoffold = function(element, settings) {}; // 在视口右方$.abovethetop = function(element, settings) {}; // 在视口上方$.leftofbegin = function(element, settings) {}; // 在视口左方
특정 용도
1. 페이지 소개 방법
lazyload는 jquery를 사용하므로 모든 페이지에 다음과 같이 jquery를 도입해야 합니다.
<script src="jquery.js?1.1.11"></script><script src="jquery.lazyload.js?1.1.11"></script>
기본 작성 방법:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">$(function() {
$("img.lazy").lazyload();
}); data-original 속성은 실제 이미지 URL 경로를 저장합니다.
팁: CSS에서 이미지의 너비나 높이를 설정해야 합니다. 그렇지 않으면 플러그인이 제대로 작동하지 않을 수 있습니다. 임계값 설정
기본적으로 이미지가 화면에 나타날 때 로드됩니다. 이미지를 미리 로드하고 싶다면 임계값 옵션을 200으로 설정하여 이미지를 로드할 수 있습니다. 화면에서 200픽셀 떨어져 있으면 앞으로 이동합니다.
$("img.lazy").lazyload({
threshold : 200});
로드를 트리거하도록 이벤트 설정
이벤트는 click 및 mouseover와 같은 모든 jQuery 이벤트일 수 있습니다. 또한 sporty 및 foobar와 같은 사용자 정의 이벤트를 사용할 수도 있습니다. 사용자가 창에서 이미지 위치로 스크롤할 때까지 회색 자리 표시자 이미지를 클릭하기 전에 이미지가 로드되지 않도록 하려면 다음을 수행할 수 있습니다.
$("img.lazy").lazyload({
event : "click"});
물론 다음 방법을 사용하여 구현할 수도 있습니다. 지연 로딩:
$(function() {
$("img.lazy").lazyload({
event : "sporty"});
});
$(window).bind("load", function() {var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});
페이지가 로드된 후 5초 후에 이미지 지연 로딩을 수행합니다.
지연 로딩 효과
이미지가 완전히 로드되면 플러그인은 기본적으로 show() 메서드를 사용하여 이미지를 표시합니다. 실제로 다음 코드에서 사용하는 특수 효과를 사용할 수 있습니다. FadeIn 효과:
$("img.lazy").lazyload({
effect : "fadeIn"});
JavaScript를 지원하지 않는 브라우저를 사용하는 방법
JavaScript는 거의 모든 브라우저에서 활성화됩니다. 그러나 브라우저가 JavaScript를 지원하지 않는 클라이언트에서는 여전히 실제 이미지를 표시하고 싶을 수 있습니다. JavaScript를 지원하지 않습니다. 다운그레이드하려면 실제 이미지 조각을
<img class="lazy" data-original="img/example.jpg" width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
자리 표시자는 CSS를 통해 숨길 수 있습니다.
.lazy {
display: none;
}
JavaScript를 지원하는 브라우저에서는 DOM이 준비되면 자리 표시자를 표시해야 하며, 이는 플러그인이 초기화되는 동시에 수행될 수 있습니다.
$("img.lazy").show().lazyload();
지연 로딩 이미지 컨테이너 설정
스크롤 막대가 있는 DIV 요소와 같은 스크롤 가능한 컨테이너의 이미지에 플러그인을 사용할 수 있습니다. 컨테이너를 jQuery 개체로 정의하고 이를 전달하기만 하면 됩니다. 매개변수 초기화 방법:
#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")
});
사진이 순서대로 정렬되지 않은 경우
페이지가 스크롤되면 Lazy Load는 로드된 사진을 반복하여 사진이 보이는 영역 내에 있는지 확인합니다. 기본적으로 첫 번째 그림이 발견됩니다. 보이는 영역에 이미지가 없으면 반복을 중지합니다. 이미지는 유동적으로 배포되는 것으로 간주되며, 페이지 내 이미지의 순서는 HTML 코드의 순서와 동일합니다. 일부 레이아웃에서는 이 가정이 사실이 아닙니다. 그러나 로딩 동작을 제어하기 위해 failurelimit 옵션을 전달할 수 있습니다.
$("img.lazy").lazyload({
failure_limit : 10});
눈에 보이는 영역에 없는 10개의 이미지를 찾은 후에만 플러그인이 검색을 중지하도록 failurelimit를 10으로 설정하세요. 레이아웃이 복잡하다면 이 매개변수를 더 높게 설정하세요.
숨겨진 사진을 로드하도록 설정하세요
페이지에 숨겨진 사진이 많이 있을 수 있습니다. 예를 들어, 플러그인을 사용하여 목록을 필터링하는 경우 목록에 있는 각 항목의 표시 상태를 지속적으로 수정할 수 있습니다. 성능 향상을 위해 숨겨진 이미지를 지연 로드하는 것은 기본적으로 무시됩니다. 숨겨진 이미지를 로드하려면 Skip_invisible을 false로 설정하세요.
$("img.lazy").lazyload({
skip_invisible : true});
소스 코드
공식 웹사이트 주소:
/*!
* Lazy Load - jQuery plugin for lazy loading images
*
* Copyright (c) 2007-2015 Mika Tuupola
*
* Licensed under the MIT license:
*
*
* Project home:
*
*
* Version: 1.9.7
* */
(function($, window, document, undefined) {var $window = $(window);
$.fn.lazyload = function(options) {var elements = this;var $container;var settings = {
threshold : 0,
failure_limit : 0,
event : "scroll",
effect : "show",
container : window,
data_attribute : "original",
skip_invisible : false,
appear : null,
load : null,
placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"}; function update() {var counter = 0;
elements.each(function() {var $this = $(this);if (settings.skip_invisible && !$this.is(":visible")) {return;
}if ($.abovethetop(this, settings) ||$.leftofbegin(this, settings)) {/* Nothing. */} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$this.trigger("appear");/* if we found an image we'll load, reset the counter */counter = 0;
} else {if (++counter > settings.failure_limit) {return false;
}
}
});
} if(options) {/* Maintain BC for a couple of versions. */if (undefined !== options.failurelimit) {
options.failure_limit = options.failurelimit;delete options.failurelimit;
}if (undefined !== options.effectspeed) {
options.effect_speed = options.effectspeed;delete options.effectspeed;
}
$.extend(settings, options);
} /* Cache container as jQuery as object. */$container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container); /* Fire one scroll event per scroll. Not one scroll event per image. */if (0 === settings.event.indexOf("scroll")) {
$container.bind(settings.event, function() {return update();
});
} this.each(function() {var self = this;var $self = $(self);
self.loaded = false; /* If no src attribute given use data:uri. */if ($self.attr("src") === undefined || $self.attr("src") === false) {if ($self.is("img")) {
$self.attr("src", settings.placeholder);
}
} /* When appear is triggered load original image. */$self.one("appear", function() {if (!this.loaded) {if (settings.appear) {var elements_left = elements.length;
settings.appear.call(self, elements_left, settings);
}
$("<img />")
.bind("load", function() { var original = $self.attr("data-" + settings.data_attribute);
$self.hide();if ($self.is("img")) {
$self.attr("src", original);
} else {
$self.css("background-image", "url('" + original + "')");
}
$self[settings.effect](settings.effect_speed);
self.loaded = true; /* Remove image from array so it is not looped next time. */var temp = $.grep(elements, function(element) {return !element.loaded;
});
elements = $(temp); if (settings.load) {var elements_left = elements.length;
settings.load.call(self, elements_left, settings);
}
})
.attr("src", $self.attr("data-" + settings.data_attribute));
}
}); /* When wanted event is triggered load original image *//* by triggering appear. */if (0 !== settings.event.indexOf("scroll")) {
$self.bind(settings.event, function() {if (!self.loaded) {
$self.trigger("appear");
}
});
}
}); /* Check if something appears when window is resized. */$window.bind("resize", function() {
update();
}); /* With IOS5 force loading images when navigating with back button. *//* Non optimal workaround. */if ((/(?:iphone|ipod|ipad).*os 5/gi).test(navigator.appVersion)) {
$window.bind("pageshow", function(event) {if (event.originalEvent && event.originalEvent.persisted) {
elements.each(function() {
$(this).trigger("appear");
});
}
});
} /* Force initial check if images should appear. */$(document).ready(function() {
update();
}); return this;
}; /* Convenience methods in jQuery namespace. *//* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {var fold; if (settings.container === undefined || settings.container === window) {
fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
} return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.width() + $window.scrollLeft();
} else {
fold = $(settings.container).offset().left + $(settings.container).width();
} return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.scrollTop();
} else {
fold = $(settings.container).offset().top;
} return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {var fold; if (settings.container === undefined || settings.container === window) {
fold = $window.scrollLeft();
} else {
fold = $(settings.container).offset().left;
} return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.inviewport = function(element, settings) { return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
!$.belowthefold(element, settings) && !$.abovethetop(element, settings);
}; /* Custom selectors for your convenience. *//* Use as $("img:below-the-fold").something() or *//* $("img").filter(":below-the-fold").something() which is faster */
$.extend($.expr[":"], {"below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },"above-the-top" : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },"in-viewport" : function(a) { return $.inviewport(a, {threshold : 0}); },/* Maintain BC for couple of versions. */"above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },"right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0}); },"left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0}); }
});
})(jQuery, window, document);
둘: 간단한 지연 로딩 플러그인
js 코드
window.smallDelay = (function(window, document, undefined) {'use strict';var store = [],poll;var settings = {
offset:0, //离可视区域多少像素的图片可以被加载throttle: 250 //图片延时多少毫秒加载 } var _inView = function(el) {var coords = el.getBoundingClientRect();return ((coords.top >= 0 && coords.left >= 0) && coords.top <= ((window.innerHeight || document.documentElement.clientHeight) + parseInt(settings.offset)));
};var _pollImages = function() {for (var i = store.length; i--;) {var self = store[i];if (_inView(self)) {
self.src = self.getAttribute('data-delay');
store.splice(i, 1);
}
}
};var _throttle = function() {
clearTimeout(poll);
poll = setTimeout(_pollImages, settings.throttle);
};var init = function(obj) {var nodes = document.querySelectorAll('[data-delay]');var opts = obj || {};
settings.offset = opts.offset || settings.offset;
settings.throttle = opts.throttle || settings.throttle;for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
_throttle(); //滚动监听执行图片懒加载if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
} //返回该对象进行链式操作return this;
};return {
init: init,
render: _throttle
};
})(window, document);호출 방법: HTML 코드:
rreee
三：根据lazyload插件实现一个不依赖jQuery的懒加载插件
实现内容
1、增加了图片预加载可选
2、修改了图片本身就在可视范围的时候直接显示而不需要滚动条触发
3、修改了Splice删除数组的时候，会跳过下一张图片BUG
4、浏览器窗口resize的时候图片出现也会加载
5、判断图片父层包裹顶部或者底部出现在可视范围内即可显示图片
实现源码
var Lazy = {
$:function(arg,context){var tagAll,n,eles=[],i,sub = arg.substring(1);
context = context|| document;if(typeof arg =='string'){switch(arg.charAt(0)){case '#':return document.getElementById(sub);break;case '.':if(context.getElementsByClassName) return context.getElementsByClassName(sub);
tagAll = Lazy.$('*');
n = tagAll.length;for(i = 0;i<n;i++){if(tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
}return eles;break;default:return context.getElementsByTagName(arg);break;
}
}
},
getPos:function (node) {var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
scrollt = document.documentElement.scrollTop || document.body.scrollTop;var pos = node.getBoundingClientRect();return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
},
bind:function(node,type,handler){
node.addEventListener?node.addEventListener(type, handler, false):node.attachEvent('on'+ type, handler);
},
unbind:function(node,type,handler){
node.removeEventListener?node.removeEventListener(type, handler, false):node.detachEvent('on'+ type, handler);
},
toArray:function(eles){var arr = [];for(var i=0,n=eles.length;i<n;i++){
arr.push(eles[i]);
}return arr;
}
};function imgLazyLoad(){var timer,screenHeight = document.documentElement.clientHeight;// 选择所有图片var allimg = Lazy.$('img');// 筛选CLASS为lazyload的图片var elems = Lazy.$('.lazyload',allimg);// 转换为真正的数组elems = Lazy.toArray(elems);if(!elems.length) return;// 没有发生滚动事件时如果图片在可视范围之内，也显示for(var i = 0;i < elems.length;i++){// 获取图像的父元素即包裹图像的元素，判断图像是否在可视区域即直接判断父元素是否可视var parent = elems[i].parentNode;var pos = Lazy.getPos(parent);var posT = pos.top;var posB = pos.bottom;// 没有滚动条情况如果距离顶部的距离小于屏幕的高度则赋值SRCif(posT < screenHeight){
elems[i].src = elems[i].getAttribute('data-img');// 移除后，数组的长度减一，下一个下标需减一elems.splice(i--,1);
}
}// 绑定scroll事件Lazy.bind(window,'scroll',loading);
Lazy.bind(window,'resize',loading);function loading(){
timer && clearTimeout(timer);
timer = setTimeout(function(){var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
screenHeight = document.documentElement.clientHeight;for(var i = 0;i < elems.length;i++){var parent = elems[i].parentNode;var pos = Lazy.getPos(parent);var posT = pos.top;var posB = pos.bottom;var screenTop = screenHeight+scrollTop;// 元素顶部出现在可视区 或者 元素底部出现在可视区if((posT > scrollTop && posT < screenTop) || (posB > scrollTop && posB < screenTop)){
elems[i].src = elems[i].getAttribute('data-img');
elems.splice(i--,1);
}else{// 去掉以下注释开启图片预加载// new Image().src = elems[i].getAttribute('data-img'); }
}if(!elems.length){
Lazy.unbind(window,'scroll',loading);
Lazy.unbind(window,'resize',loading);
}
},300);
}
}
imgLazyLoad();使用方法
1、在图片上增加lazyload的类(class='lazyload')
2、把真实的图片地址放入自定义属性data-img 中，把图片的SRC属性设置为一个一像素的透明图片，图片需要设置width，height属性，以免布局混乱
如下：
<img data-img="a.jpg" src="loading.gif" width="640" height="480" class='lazyload'>
3、在需要延迟加载的页面调用imgLazyLoad()函数；
该原生js实现的懒加载转载地址：
위 내용은 이미지의 지연 로딩 및 jquery.lazyload.js의 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.