我的lazyload插件中的bug用於mootools

我想在MooTools中實現插件序列下載圖片。假設有一個帶有類imageswrapper的div中的img標籤。在加載下一個圖像之後需要持續下載每個圖像，直到所有圖像都未加載。我的lazyload插件中的bug用於mootools

window.addEvent('domready', function(){ 
// get all images in div with class 'imageswrapper' 
var imagesArray = $$('.imageswrapper img'); 
var tempProperty = ''; 
// hide them and set them to the attribute 'data-src' to cancel the background download 
for (var i=0; i<imagesArray.length; i++) { 
    tempProperty = imagesArray[i].getProperty('src'); 
    imagesArray[i].removeProperty('src'); 
    imagesArray[i].setProperty('data-src', tempProperty); 
} 

tempProperty = ''; 
var iterator = 0; 

// select the block in which we will inject Pictures 
var injDiv = $$('div.imageswrapper'); 

// recursive function that executes itself after a new image is loaded 
function imgBomber() { 
    // exit conditions of the recursion 
    if (iterator > (imagesArray.length-1)) { 
     return false; 
    } 
    tempProperty = imagesArray[iterator].getProperty('data-src'); 
    imagesArray[iterator].removeProperty('data-src'); 
    imagesArray[iterator].setProperty('src', tempProperty); 
    imagesArray[iterator].addEvent('load', function() { 
     imagesArray[iterator].inject(injDiv); 
     iterator++; 
     imgBomber(); 
    }); 

} ; 
imgBomber(); 
});

來源

2013-11-01 Maxim Postnikov

請不要忘記點擊，如果它回答了你的問題，接受這個答案 – Sergio

我在這裏可以看到幾個問題。你有沒有實際說的是什麼問題所以......這更是一個代碼審查的你/的想法，直到你發佈它的實際問題（或與它的jsfiddle）

在運行此代碼在domready中瀏覽器可能已經基於src屬性啓動了圖像的下載。你將被關閉從服務器發送data-src更好的直接之前，你甚至開始
也許最大的問題是：var injDiv = $$('div.imageswrapper');將返回一個集合 - 所以[<div.imageswrapper></div>, ..] - 不能採取inject因爲目標可以是多個DOM節點。改爲使用var injDiv = document.getElement('div.imageswrapper');。
對於跨瀏覽器，load事件和.addEvent('load')存在問題。他們需要在執行後進行清理，如IE < 9，例如，每發生一次動畫gif循環，它就會觸發load。此外，您沒有onerror和onabort處理程序，這意味着您的加載程序將停止在404或任何其他意外的響應。
您不應該使用data-src來存儲數據，它很慢。 MooTools具有元素存儲 - 使用el.store('src', oldSource)和el.retrieve('src')和el.eliminate('src')。快多了。
您將迭代器公開到上範圍。
使用MooTools的API - 使用.set()和.get()而不是.getProperty()和.setProperty()
for (var i)迭代器是不安全的用於異步操作。應用程序的控制流將繼續運行，不同的操作可能會引用錯誤的迭代器索引。看看你的代碼，這不應該是這樣，但你應該使用從Elements/Array方法的mootools .each(fn(item, index), scope)。

無論如何，你的問題已經在幾個層面上解決了。

例如，我寫了pre-loader - 框架不可知的圖像加載器插件，可以下載圖像陣列或者在平行或流水線與onProgress等事件（如你想） - 見http://jsfiddle.net/dimitar/mFQm6/ - 見截圖在readme.md的底部：

Moot解決，這也（無需等待上一張圖片）通過資產。js - http://mootools.net/docs/more/Utilities/Assets#Asset:Asset-image和Asset.images多個。見靈感之源 - https://github.com/mootools/mootools-more/blob/master/Source/Utilities/Assets.js

以下範例通過我的預加載器類這樣做：http://jsfiddle.net/dimitar/JhpsH/

(function(){ 
    var imagesToLoad = [], 
     imgDiv = document.getElement('div.injecthere'); 

    $$('.imageswrapper img').each(function(el){ 
     imagesToLoad.push(el.get('src')); 
     el.erase('src'); 
    }); 

    new preLoader(imagesToLoad, { 
     pipeline: true, // sequential loading like yours 
     onProgress: function(img, imageEl, index){ 
      imgDiv.adopt(imageEl); 
     } 
    }); 

}());

來源

2013-11-01 09:38:50

我的lazyload插件中的bug用於mootools

回答

相關問題