javascript - 我的 mootools 延迟加载插件中的错误

Question

我想在MooTools中实现一个串口下载图片的插件。假设在类 imageswrapper 的 div 中有带有 img 标签的图片。需要在加载下一个图像后持续下载每个图像，依此类推，直到所有图像都未加载。

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();
});

Answer 1

我可以在这里看到几个问题。您实际上还没有说出问题是什么......这对您来说更像是代码审查/想法，直到您发布实际问题(或 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 中，它将触发 load例如，每次动画 gif 循环时。另外，你没有 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)迭代器用于异步操作是不安全的。应用程序的控制流将继续运行，不同的操作可能会引用错误的迭代器索引。查看您的代码，情况并非如此，但您应该使用 mootools .each(fn(item, index), scope)来自 Elements/Array方法。

无论如何，你的问题已经在几个层次上得到了解决。

例如，我写了pre-loader - 一个与框架无关的图像加载器插件，可以使用 onProgress 以并行 或流水线(就像您尝试的那样)下载一组图像等事件 - 请参阅 http://jsfiddle.net/dimitar/mFQm6/ - 查看 readme.md 底部的屏幕截图:

MooTools 也通过 Asset.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);
        }
    });

}());