프로젝트에서 이미지 지연 로딩이 가끔 사용되는데, 지연 로딩의 이점은 무엇인가요?
두 가지 주요 사항이 있다고 생각합니다. 첫 번째는 큰 이미지가 많이 포함된 긴 페이지에서 이미지 로딩을 지연시키는 것이 페이지 로딩 속도를 높일 수 있다는 것입니다. 두 번째는 서버의 부하를 줄이는 데 도움이 된다는 것입니다.
다음에서는 일반적으로 사용되는 지연 로딩 플러그인 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) {}; // 在视口左方<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();
});임계값 설정
$("img.lazy").lazyload({
threshold : 200});$("img.lazy").lazyload({
event : "click"});$(function() {
$("img.lazy").lazyload({
event : "sporty"});
});
$(window).bind("load", function() {var timeout = setTimeout(function() {
$("img.lazy").trigger("sporty")
}, 5000);
});지연 로딩 효과
$("img.lazy").lazyload({
effect : "fadeIn"});<img class="lazy" data-original="img/example.jpg" width="640" heigh="480"><noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
.lazy {
display: none;
}$("img.lazy").show().lazyload();#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")
});$("img.lazy").lazyload({
failure_limit : 10});숨겨진 사진을 로드하도록 설정하세요
$("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);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);rreee
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
