2

我想在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();
});
4

1 回答 1

3

我可以在这里看到几个问题。您实际上并没有说问题出在哪里...这更多是对您的代码审查/想法，直到您发布了实际问题（或使用它的jsfiddle）

  • domready您在浏览器可能已经根据 src 属性启动图像下载的地方运行此代码。你最好data-src在开始之前直接从服务器发送

  • 可能最大的问题是：var injDiv = $$('div.imageswrapper');将返回一个 COLLECTION - 所以-因为目标可以是多个 dom 节点，所以[<div.imageswrapper></div>, ..]它不能接受。inject改为使用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()and.get()和 not .getProperty()and.setProperty()

  • for (var i)迭代器用于异步操作是不安全的。应用程序的控制流将继续运行，不同的操作可能会引用错误的迭代器索引。查看您的代码，情况并非如此，但您应该使用.each(fn(item, index), scope)/Elements方法Array中的 mootools。

无论如何，您的问题已经在多个层面上得到解决。

例如，我编写了预加载器- 一个与框架无关的图像加载器插件，它可以通过etc 事件并行或流水线化（如您尝试）下载一组图像 - 请参阅http://jsfiddle.net/dimitar/mFQm6/ - 查看 readme.md 底部的屏幕截图：onProgress

管道瀑布

平行瀑布

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

}());
于 2013-11-01T09:38:50.753 回答