Question

在产品库中，我可以选择项目，序列或侧视图的颜色。每个选项都有自己的图片。当我单击其中一个选项时，我有src替换图像，对于我使用fadeIn / fadeOut的效果，它看起来像：

$('button').click(function(){
 $('img').fadeOut("slow",function(){
 $(this).attr("src",newSRC);
 $(this).fadeIn("slow");
});
});

但是当fadeIn完成时图片没有时间绘制，即使它已经加载到缓存中并且对于网站库intercoms来说看起来非常奇怪

我不能使用preCache所有图像，因为如果产品将超过100个项目，网站将整天加载，在主要情况下低连接。我想完全删除项目，然后使用加载，但我无法删除项目'caz画廊将崩溃（这是一个灵活的网站，我无法删除项目，所有将崩溃）。现在我做了一点GIF，但是... facepalm，抱歉。

那么您认为最佳解决方案是什么？

Answer 1

我会等待下一张图片加载后再淡入，例如：

var loadFail;
$('button').click(function(){
    $('img').fadeOut("slow",function(){
        $(this)
         .attr("src",newSRC)
         .load(function(){
            $('img').fadeIn("slow");
            clearTimeout(loadFail);
         });
        loadFail = setTimeout(function(){
            $('img').fadeIn("slow");
        }, 4000);
    });
});

Answer 2

我开始在点击时立即加载新图像（进入临时图像对象），以便更快（甚至可能在fadeOut完成之前）可用，而不是等到实际需要它来开始加载。这会将图像放入浏览器缓存中，以便在分配真实图像的src时立即加载，并且等待时间会更短：

$('button').click(function(){
    var imgLoaded = false, fadeDone = false;
    var fadeTarget = $('img');

    // fadeIn the new image when everything is ready
    function fadeIfReady() {
        if (imgLoaded && fadeDone) {
            fadeTarget.attr("src", newSrc).fadeIn("slow");
        }
    }

    // create temporary image for starting preload of new image immediately
    var tempImg = new Image();
    tempImg.onload = function() {
        imgLoaded = true;
        fadeIfReady();
    };
    tempImg.src = newSrc;

    // start the fadeOut and do the fadeIn when the fadeOut is done or 
    // when the image gets loaded (whichever occurs last)
    fadeTarget.fadeOut("slow",function(){
        fadeDone = true;
        fadeIfReady();
    });
});

图像替换

2 个答案: