使用 JavaScript 进行智能图像加载

smart image loading with javascript

本文关键字：图像 加载 智能 JavaScript 使用      更新时间：2023-09-26

这是我的场景，我们有一张猫的主图像（假设它的 1000px x 1000px）和 10 张猫的缩略图（100px x 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 个缩略图图像和主图像都会改变。用户对猫没有兴趣，几乎立即选择狗选项。

问题

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

提前谢谢。

假设选择如下所示：

<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;
});
相关文章：