1

这是我的场景，我们有一个猫的主要图像（假设它的 1000 像素 x 1000 像素）和 10 个猫的缩略图（100 像素 x 100 像素）。当拇指被选中时，主图像会发生变化。目前正在使用预加载图像

$('#showcase .thumbnail').each(function(index,el){
    var mainImg = $(el)[0].src.replace('small','large');
    var img = new Image();
    img.src = mainImg;
});

这将加载我的大版本缩略图。

I have A <select>tag, with four <option>'s, when an option is selected the 10 thumbnail images will change as well as the main image. 用户对猫没有兴趣，几乎立即选择了狗选项。

问题

可以将猫图片推送到图片列表的后面下载并优先考虑狗图片吗？

提前致谢。

4

1 回答 1

1

假设选择如下所示：

<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;
});
于 2013-10-25T13:24:49.530 回答