假设选择如下所示:
<select id="select">
<option value="">Please select</option>
<option value="dogs">Dogs</option>
<option value="cats">Cats</option>
<option value="fishes">Fishes</option>
</select>
每个图像都有一个对应于值的类名(例如<img class="cat" src=... />
)然后这里有一些代码(没有彻底测试):
// is something selected in the dropdown
var selection = false;
// observe the dropdown
$('#select').change(function(){
// the user selected something -> store it
if(this.value) {
selection = this.value;
}
// back to default
else {
selection = false;
}
});
// store the images
var images = $('#showcase .thumbnail');
// stack for the unreplaced images
var stack = [];
// first run
function replaceImages(images, currentIndex) {
// we're finished
if (imageURLarray.length == 0 || images.length == currentIndex) {
return false;
}
// there's no selection at all or we have a selection and the current image has the corresponding class -> replace it
if(!selection || (selection && $(images[currentIndex]).hasClass(selection))) {
var mainImg = $(images[currentIndex])[0].src.replace('small','large');
var img = new Image();
img.src = mainImg;
// wait for loading. If we wouldn't wait, all image src's would be replaced in a second and our prioritizing magic wouldn't happen
img.onload = function(e){
// image has loaded -> next image
replaceImages(images, currentIndex++);
}
}
// there's a selection and the class doesn't match -> store the image in the stack
else {
stack.push(currentIndex);
}
}
// run the function
replaceImages(images, 0) {
// process the stack, i.e. the non-replaced images
$(stack).each(function(index, val){
var mainImg = $(images[val]).src.replace('small','large');
var img = new Image();
img.src = mainImg;
});