问用javascript加载智能图像

EN

<select id="select">
    <option value="">Please select</option>
    <option value="dogs">Dogs</option>
    <option value="cats">Cats</option>
    <option value="fishes">Fishes</option>
</select>

// 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;
});