Question

Heres是我的场景，我们有一个猫的主要形象（比方说1000px×1000px）和10个猫的缩略图（100px×100px）。选择拇指后，主图像会发生变化。目前正在使用

预加载图像

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

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

我有一个<select>标记，有四个<option>，当选择一个选项时，10个缩略图图像和主图像都会发生变化。用户对猫没兴趣，几乎立即选择狗选项。

问题

可以将猫图像推到图像列表的后面以下载并优先处理狗图像吗？

提前致谢。

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

使用javascript加载智能图像

问题

1 个答案: