[英]How to load regular images in mootools lazyload
大衛·沃爾什(David Walsh)的懶惰存在這個問題,有些人似乎對此感到困惑。
我不希望頁面上的每個圖像都延遲加載,而事實是,沒有'data-src'但僅帶有'src'的圖像根本不會加載。
我嘗試將“容器:窗口”選項替換為“容器:'mydiv”,但是延遲加載代碼仍適用於整個頁面。
您是否可以在代碼中添加一些內容,以便lazyload僅在看到帶有data-scr的圖像時才起作用?
var LazyLoad = new Class({
Implements: [Options,Events],
/* additional options */
options: {
range: 200,
elements: "img",
container: window,
mode: "vertical",
realSrcAttribute: "data-src",
useFade: true
},
/* initialize */
initialize: function(options) {
// Set the class options
this.setOptions(options);
// Elementize items passed in
this.container = document.id(this.options.container);
this.elements = $$(this.options.elements);
// Set a variable for the "highest" value this has been
this.largestPosition = 0;
// Figure out which axis to check out
var axis = (this.options.mode == "vertical" ? "y": "x");
// Calculate the offset
var offset = (this.container != window && this.container != document.body ? this.container : "");
// Find elements remember and hold on to
this.elements = this.elements.filter(function(el) {
// Make opacity 0 if fadeIn should be done
if(this.options.useFade) el.setStyle("opacity",0);
// Get the image position
var elPos = el.getPosition(offset)[axis];
// If the element position is within range, load it
if(elPos < this.container.getSize()[axis] + this.options.range) {
this.loadImage(el);
return false;
}
return true;
},this);
// Create the action function that will run on each scroll until all images are loaded
var action = function(e) {
// Get the current position
var cpos = this.container.getScroll()[axis];
// If the current position is higher than the last highest
if(cpos > this.largestPosition) {
// Filter elements again
this.elements = this.elements.filter(function(el) {
// If the element is within range...
if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) {
// Load the image!
this.loadImage(el);
return false;
}
return true;
},this);
// Update the "highest" position
this.largestPosition = cpos;
}
// relay the class" scroll event
this.fireEvent("scroll");
// If there are no elements left, remove the action event and fire complete
if(!this.elements.length) {
this.container.removeEvent("scroll",action);
this.fireEvent("complete");
}
}.bind(this);
// Add scroll listener
this.container.addEvent("scroll",action);
},
loadImage: function(image) {
// Set load event for fadeIn
if(this.options.useFade) {
image.addEvent("load",function(){
image.fade(1);
});
}
// Set the SRC
image.set("src",image.get(this.options.realSrcAttribute));
// Fire the image load event
this.fireEvent("load",[image]);
}
});
/* do it! */
window.addEvent("domready",function() {
var lazyloader = new LazyLoad({/*
onScroll: function() { console.warn("scroll!"); },
onLoad: function(img) { console.warn("load!", img); },
onComplete: function() { console.warn("complete!"); }
*/
});
});
和HTML
<img src="/images/lazy/blank.gif" data-src="/images/lazy/mypic.jpg"></img>
編輯:(此代碼替換'// Elementize傳入的項解決了該問題...但創建了另一個.... lazyload未在滾動上加載圖像。而是在加載頁面時全部加載)
this.container = document.id(this.options.container);
this.elements = document.id(this.container == window ? document.body :
this.container).getElements(this.options.elements);
好。 看代碼:
// Elementize items passed in
this.container = document.id(this.options.container);
this.elements = $$(this.options.elements);
看起來好像沒有在引用該容器。
改成:
// Elementize items passed in
this.container = document.id(this.options.container);
this.elements = this.container.getElements(this.options.elements);
並確保options.elements是一個明智的選擇器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.