Das verzögerte Laden von Bildern wird manchmal in Projekten verwendet. Welche Vorteile bietet das verzögerte Laden?
Ich denke, es gibt zwei Hauptpunkte: Das Verzögern des Ladens von Bildern auf langen Seiten, die viele große Bilder enthalten, kann das Laden der Seite beschleunigen.
Im Folgenden werden das häufig verwendete Lazy-Loading-Plug-In jquery.lazyload.js und die Implementierung eines Lazy-Loading-Plug-Ins vorgestellt.
Lazyload ist ein von jQuery geschriebenes Lazy-Loading-Plugin. Bilder außerhalb des sichtbaren Bereichs des Browsers werden erst geladen Der Benutzer scrollt durch die Seite, wo er sich befindet. Dies ist das genaue Gegenteil davon, wie das Vorladen von Bildern gehandhabt wird.
Erstens ist das ausgewählte img-Element an ein Erscheinungsereignis gebunden (Verarbeitung des img, um die echte Bildadresse anzuzeigen), sodass das Ereignis ausgelöst werden kann, wenn die Bedingungen erfüllt sind in der Zukunft;
Es gibt eine Containerattributkonfiguration, die standardmäßig „window“ ist. Wenn sich das img-Element im Container-Container-Ansichtsfenster befindet, wird das Erscheinungsereignis ausgelöst Um festzustellen, ob sich das IMG-Element im Container-Ansichtsbereich befindet, gibt es die folgenden vier Methoden:
$.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();
});Schwellenwert festlegen
$("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);
});Lazy-Loading-Effekt
$("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});Eingestellt, um versteckte Bilder zu laden
$("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);smallDelay.init({
offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 0 //图片延时多少毫秒加载});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实现的懒加载转载地址：
Das obige ist der detaillierte Inhalt vonLazy Loading von Bildern und Anwendungsbeispiele von jquery.lazyload.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
