我正在尝试制作4个滑动画廊,但我需要在以画廊形式显示图像之前预先加载(缓存)所有图像。我一直试图使用“jPreLoader v2 - http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images”,但没有运气。
以下代码是我试图将每个图库目录中的所有图像预加载到jpreloader后面的单个图库中,然后一旦加载完成删除整个图库并一次显示每个图库。
var pictures = [
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
.......,
"30.jpg"
]
$(window).load(function(){
preLoad();
function preLoad(){
var max = 30;
var pic;
picture = '<table id="table" style="dipslay:table;"><tr>';
for (var i=0;i < max; i++){
if(i < 30){
pic = "images/art/"+pictures[i];
appendCell(pic);
}
if(i < 17){
pic = "images/street/"+pictures[i];
appendCell(pic);
}
if(i < 19){
pic = "images/doc/"+pictures[i];
appendCell(pic);
}
if(i < 16){
pic = "images/commercial/"+pictures[i];
appendCell(pic);
}
};
picture += '</tr></table>';
$('#imageScroller').append(picture);
}
function appendCell(pic){
picture +="<td class='image'><img class='i' src='"+pic+"'></td>";
return;
}
});
我不太确定如何在上面的动态图像加载循环中实现jpreloader,而不是已经插入到dom中。
$(document).ready(function () {
$('body').jpreLoader();
});
感谢。
答案 0 :(得分:7)
下载图片时更新的自定义进度条
var pictures = [
"1.jgp",
"2.jpg"
];
var loadedSoFar = 0;
function loaded( ) {
// do stuff
}
function updateProgress( ) {
loadedSoFar++;
var newWidth = $("#progress").width() * ( loadedSoFar / pictures.length );
$("#bar").stop( true, true );
$("#bar").animate({ width: newWidth }, 500, function( ) {
if( loadedSoFar === pictures.length ) { loaded() }
});
}
for( var i = 0; i < pictures.length; i++ ) {
var img = new Image();
img.src = pictures[ i ] + i;
img.onload = function( ) {
updateProgress();
}
}
演示here