有什么想法吗?任何插件?我想找到所有 img 标签并按顺序显示它们?谢谢你
问问题
1987 次
3 回答
5
创建一个小的 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();
};
像这样调用它:
$.preloadImages();
jsFiddle 示例
于 2010-11-30T17:22:15.897 回答
0
通过这个
于 2010-11-30T17:27:16.863 回答
0
我在网站上使用此功能按特定顺序按顺序预加载图像列表:
它还维护一个进度指示器。
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();
list是图像名称的数组。
顾名思义,rootpath是您需要预加载的所有图像的路径前缀。通常,它是您的应用程序的图像路径。
containerId是您的预加载器容器,如果您想使用背景和进度指示器。如果您只需要在后台预加载,请将其设置为空字符串。
onFinished通常包含一个在所有预加载完成时触发的函数。通常,您可以在此时展示您的图像。
onItemFinished是您需要在每个图像加载后触发的函数。
您可以省略该MicrositeUtils.Logger.log
功能或仅使用您自己的例程来实现它。
于 2011-05-17T06:08:29.253 回答