Question

我有一个简单的要求，即在加载时在多个图像上显示单个进度条（在页面中，而不是在表单中上传时）。

我搜索了图像预加载和加载插件，但找不到任何与我所追求的简单视觉设计和实现工作相匹配的内容。

所以我使用loadie.js的方式可能原本并不是为了显示多个图像的进度条。

如何使loadie的每个实例对每个图像都是唯一的，这样我用来将每个图像标记为加载的on("load", function()函数对每个图像都是唯一的？

HTML

<div class="image_container">
<div class="my_loadie_container"></div>
<div class="img_cover"></div>
<img class="my_image" src="http://lorempixel.com/1000/1000/nature/">
</div>
<div class="image_container">
<div class="my_loadie_container"></div>
<div class="img_cover"></div>
<img class="my_image" src="http://lorempixel.com/1000/1000/transport/">
</div>
<div class="image_container">
<div class="my_loadie_container"></div>
<div class="img_cover"></div>
<img class="my_image" src="http://lorempixel.com/1000/1000/technics/">
</div>

CSS

.image_container {
width:55px;   
position:relative;
}

/* needed so that loadie is centered and 
   not the full width of the thumbnail when fully loaded  */  
.my_loadie_container {
position:absolute !important; 
height:15px;
width:42px; 
left:7px;   
z-index:9999;
}

.img_cover {
background: none repeat scroll 0 0 #DDDDDD;
border-radius: 5px;
display: inline-block;
height: 50px;
left: 2px;
position: absolute;
top: 2px;
width: 55px;
}

.my_image {
width:55px;
height:50px;
border-radius:5px;
border:2px solid #333333;
}

.loadie {
position: absolute;
top:19px;
left:0px;
background-color: #fff;
width: 0;
height: 15px;
border-radius:2px;
-webkit-transition: width 0.3s ease-out;
-moz-transition: width 0.3s ease-out;
-o-transition: width 0.3s ease-out;
transition: width 0.3s ease-out;
box-shadow: 0px 1px 5px rgba(0,0,0,0.25);
}

的jQuery

$('.my_loadie_container').loadie(); 

// add a bit more progress
var progress = 0.2
setTimeout(function() {
$('.my_loadie_container').loadie(progress);
}, 300);

// add a bit more progress
var progress = 0.4
setTimeout(function() {
$('.my_loadie_container').loadie(progress);
}, 100);

// add a bit more progress
var progress = 0.6
setTimeout(function() {
$('.my_loadie_container').loadie(progress);
}, 200);

// set progress to 100%
$(".my_image").on ("load",function() {
//alert('I loaded!');
percent = 1;
$('.my_loadie_container').loadie(percent);
$(".img_cover").fadeOut();
}).attr('src', 'http://lorempixel.com/1000/1000/nature/');

修改已更新以使用on("load", function()代替load()

Answer 1

<强>解决方案

它可能没有理想的代码，但它正在运行。如果有人想要修复坏位，请随意。我做了一些调整，以便所有类都是动态的，这样无论页面上有多少图像，它都会缩放。

坏位

我是Javascript的新手，但是从阅读一些最佳实践来看，这些是“坏位”的一些。

使用eval()。
在循环中有选择器。

但是对于这个新手来说至少让它起作用还是令人满意的。

<强>的jsfiddle

更新版本 - http://jsfiddle.net/rwone/XeX2n/29/

<强>的jQuery

// there are 2 functions:
// 
// 01.  prepareImageLoading()
// 02:  removeImageLoading()
// 

// 02. remove the preparations

function removeImageLoading() {
cl_counter = 1;
$('.my_loadie_container').each(function(i, obj) {
console.log("removing loadie container class: " + cl_counter);
$(this).removeClass('my_loadie_container_' + cl_counter++);
});

img_cl_counter = 1;
$('.my_image').each(function(i, obj) {
console.log("removing image class: " + img_cl_counter);
$(this).removeClass('my_image_' + img_cl_counter++);
$(this).unbind();
});

var $loadie_container_1 = undefined;
var $loadie_container_2 = undefined;
var $loadie_container_3 = undefined;

$(".loadie").remove();

var my_object_array = [];

console.log("unset loadie containers, remove loadie divs and unbind classes attached to load");
}

// 01.  prepare the environment

function prepareImageLoading() {

// dyanmically add unique loadie container to each
// div called my_loadie_container

cl_counter = 1;
$('.my_loadie_container').each(function(i, obj) {
$(this).addClass('my_loadie_container_' + cl_counter++);
});

// dynamically add unique class to all images
// with .my_image class

img_cl_counter = 1;
$('.my_image').each(function(i, obj) {
$(this).addClass('my_image_' + img_cl_counter++);
});

// create an array of objects 
// containing properties of the images

var my_object_array = [];
var loadie_counter = 1;
var $img_properties_array = $(".image_container img").map(function() {
var img_src = $(this).attr("src");
var img_class = $(this).attr("class");
my_object = {};
my_object.img_src = img_src;
my_object.img_class = img_class;
my_object.loadie_instance = "$loadie_container_" + loadie_counter++;
my_object_array.push(my_object);
});

// check access to properties
$.each(my_object_array, function (obj,v) {
console.log('image source: ' + v.img_src);
console.log('image class: ' + v.img_class);
});

// define loadie instances
// (this should be made dynamic to scale to number
// of required instances)
var $loadie_container_1 = $('.my_loadie_container_1');
var $loadie_container_2 = $('.my_loadie_container_2');
var $loadie_container_3 = $('.my_loadie_container_3');

// for each loadie instance, add some progress
$.each(my_object_array, function (obj,v) {
setTimeout(function() {
var progress = 0.2;
eval(v.loadie_instance).loadie(progress);
}, 300);
});

// for each image, set progress to 1 when
// image has finished loading
var counter = 1;
var new_counter = 0;
var d = new $.Deferred();
$.each(my_object_array, function (obj,v) {
counter = counter++;
var img_class = v.img_class;
// just get the dynamically added img class
var img_class_array = img_class.split(" ");
var img_class = img_class_array[img_class_array.length - 1];
// check access to img_class
console.log('img_class: ' + img_class);
var class_constructor = "." + img_class;
// check the class_constructor
console.log('class_constructor: ' + class_constructor);
// when each image has finished loading
// set loadie progress to 1
$(class_constructor).on ("load",function() {
var progress = 1;
var loadie_constructor = "$loadie_container_" + counter++;
// check the loadie_constructor
console.log('loadie_constructor: ' + loadie_constructor);
eval(loadie_constructor).loadie(progress);
$(".img_cover:eq(" + eval(new_counter++) + ")").fadeOut(1000);
if (new_counter == my_object_array.length) {
console.log("object array length: " + my_object_array.length);
setTimeout(function() {
d.resolve();
}, 1000);
};
});
// for some reason this only gets to 1
console.log('counter: ' + counter);
});
return d.promise(); 
}

// 03.  the calls
prepareImageLoading();
prepareImageLoading().done(removeImageLoading);

如何使用loadie.js显示加载多个图像的各个进度条？

1 个答案: