jQuery：对如何顺序预加载dom中的所有图像有什么建议吗？

有什么想法吗？有插件吗？我想找到所有的img标签并按顺序显示它们？

---

谢谢

创建一个小型jQuery实用程序方法：

jQuery.preloadImages = function() {
    var set = jQuery('img');
    var current = 0;
    var iterate = function() {
        var current_src = set[current].src;
        var temp = jQuery('<img/>');
        jQuery(temp).bind('load', function() {
            console.log($(this).attr('src') + ' loaded');
            jQuery(this).remove(); //remove temp image from DOM.
        });

        temp[0].src = current_src;
        jQuery('body').append(temp);
        if(++current < set.length) iterate(); //recursive call
    };
    iterate();
};

---

浏览

我在一个网站上使用此功能，按特定顺序预加载图像列表：

它还维护一个进度指标

MicrositeMedia.ImagePreLoader = function (_settings) {
var self = this;

var defaults = {
    list: [],
    rootpath: '',
    onFinished: function () { },
    onItemFinished: null,
    containerId: '#preload-container'
}

this.settings = $.extend(defaults, _settings);
this.progressElm = 'preloadProgressIndicator';
//this.settings.list.pop();
var listSize = _settings.list.length;

MicrositeUtils.Logger.log("listSize: " + listSize);

this.current = 0;

this.init = function () {
    //MicrositeUtils.Logger.log("ImagePreLoader - init()");
    // 
    $(this.settings.containerId).show();
    this.loadNext();
}

// list of already loaded items
var loadList = [];
var curImg = new Image();

this.loadNext = function () {
    if (listSize && listSize != 0) {
        // our current Image object
        var key = this.settings.list.shift();


        curImg.src = this.settings.rootpath + key;

        curImg.onerror = function () {
            //this.loadNext();
            MicrositeUtils.Logger.log("Error while loading image" + curImg.src.toString());
        }

        //MicrositeUtils.Logger.log('curImg.src: ' + curImg.src);
        // when it loads, it triggers the next load event.
        curImg.onload = function () {
            // item loading finished                
            //MicrositeUtils.Logger.log("current: " + key + ", src :" + curImg.src + "current: " + self.current);
            loadList.push(curImg.src);

            // fire single item loaded event.
            if (self.settings.onItemFinished) {
                self.settings.onItemFinished(self.current, curImg.src);
            }

            // next
            self.current += 1;

            // update loader progress indicator.
            self.updateProgressIndicator(curImg.src, self.current, listSize);


            MicrositeUtils.Logger.log("loading image " + self.current + "/" + listSize);
            if (self.current == listSize) {
                // last element has loaded, fire the complete event
                self.complete();

            }
            else {
                // call the next one recursively
                self.loadNext();

            }

        };

    }
    else {
        MicrositeUtils.Logger.log("ImageLoader.loadNext(): nothing to load!");
    }
}


this.complete = function () {

    // clean up
    $(this.settings.containerId).fadeOut('slow', function () {
        // last element has loaded, fire the onfinished event
        if (self.settings.onFinished) self.settings.onFinished();
    });

}

this.updateProgressIndicator = function (text, idx, max) {
    var elm = this.progressElm;
    var percent = (Math.round((idx / max) * 100)) + "%";

    if (!document.getElementById(elm)) {
        // insert element
        $('<div id="' + elm + '"></div>')
            .appendTo(this.settings.containerId);
    }

    //MicrositeUtils.Logger.log(percent);
    $('#' + elm).html(percent);
}

列表是图像名称的数组

顾名思义，rootpath是所有需要预加载的图像的路径前缀。一般来说，这是应用程序的映像路径

如果您想使用背景和进度指示器，containerId是您的预加载程序容器。如果只需要在后台预加载，请将其设置为en empty string

onfinish通常包含一个函数，该函数在所有预加载完成时激发。通常，此时可以显示图像

onItemFinished是在加载每个图像后需要激发的函数

---

您可以省略

MicrositeUtils.Logger.log

函数，或者只使用自己的例程来实现它。

这不会并行加载它们吗？@jacom.load函数将等待浏览器正确加载图像？？你能解释一下吗？对于image，@Jacob，该代码隐藏所有图像，然后依次为每个图像绑定一个load方法，这将显示加载时的图像。三个问题：i）当调用此命令时，所有图像加载都将处于运动状态，我假设没有src设置命令；ii）他们完成加载的顺序将取决于大小和浏览器选择；iii）如果图像已经被缓存，那么load方法将不会在某些浏览器上触发。@Orbling您有什么建议？OP要求从DOM中提取

src

。@Jacob从问题中，我不知道期望的结果是什么。可以是任何东西，从一个阶段预装或很容易幻灯片。因此我没有回答-/我们真的需要更多的信息。你到底想达到什么目的？

按顺序显示它们是什么意思？
如何查找所有img标记并按顺序显示它们
与
如何按顺序预加载dom中的所有图像
？我不明白。。。
MicrositeMedia.ImagePreLoader = function (_settings) {
var self = this;

var defaults = {
    list: [],
    rootpath: '',
    onFinished: function () { },
    onItemFinished: null,
    containerId: '#preload-container'
}

this.settings = $.extend(defaults, _settings);
this.progressElm = 'preloadProgressIndicator';
//this.settings.list.pop();
var listSize = _settings.list.length;

MicrositeUtils.Logger.log("listSize: " + listSize);

this.current = 0;

this.init = function () {
    //MicrositeUtils.Logger.log("ImagePreLoader - init()");
    // 
    $(this.settings.containerId).show();
    this.loadNext();
}

// list of already loaded items
var loadList = [];
var curImg = new Image();

this.loadNext = function () {
    if (listSize && listSize != 0) {
        // our current Image object
        var key = this.settings.list.shift();


        curImg.src = this.settings.rootpath + key;

        curImg.onerror = function () {
            //this.loadNext();
            MicrositeUtils.Logger.log("Error while loading image" + curImg.src.toString());
        }

        //MicrositeUtils.Logger.log('curImg.src: ' + curImg.src);
        // when it loads, it triggers the next load event.
        curImg.onload = function () {
            // item loading finished                
            //MicrositeUtils.Logger.log("current: " + key + ", src :" + curImg.src + "current: " + self.current);
            loadList.push(curImg.src);

            // fire single item loaded event.
            if (self.settings.onItemFinished) {
                self.settings.onItemFinished(self.current, curImg.src);
            }

            // next
            self.current += 1;

            // update loader progress indicator.
            self.updateProgressIndicator(curImg.src, self.current, listSize);


            MicrositeUtils.Logger.log("loading image " + self.current + "/" + listSize);
            if (self.current == listSize) {
                // last element has loaded, fire the complete event
                self.complete();

            }
            else {
                // call the next one recursively
                self.loadNext();

            }

        };

    }
    else {
        MicrositeUtils.Logger.log("ImageLoader.loadNext(): nothing to load!");
    }
}


this.complete = function () {

    // clean up
    $(this.settings.containerId).fadeOut('slow', function () {
        // last element has loaded, fire the onfinished event
        if (self.settings.onFinished) self.settings.onFinished();
    });

}

this.updateProgressIndicator = function (text, idx, max) {
    var elm = this.progressElm;
    var percent = (Math.round((idx / max) * 100)) + "%";

    if (!document.getElementById(elm)) {
        // insert element
        $('<div id="' + elm + '"></div>')
            .appendTo(this.settings.containerId);
    }

    //MicrositeUtils.Logger.log(percent);
    $('#' + elm).html(percent);
}

this.imagePreloader = new MicrositeMedia.ImagePreLoader({
        list: preloadList,
        rootpath: self.appPath + '/assets/images',
        onFinished: function () {
            //MicrositeUtils.Logger.log("Preload (onfinished) - all done!");
            self.LoadInitialSection();
        },
        onItemFinished: function (item, src) {
            //MicrositeUtils.Logger.log("Preload (onitemfinished) - [item, src]: [" + item + ", " + src + "]");
        }
    });

    this.imagePreloader.init();