php - 图像替换

Question

在产品库中，我可以选择项目的颜色、串行或侧 View 。每个选项都有自己的图片。当我单击这些选项之一时，我有图像的 src 替换，对于我使用 fadeIn/fadeOut 的效果，它看起来像:

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

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

我无法使用 preCache 所有图像，因为如果产品数量超过 100 个，则网站将加载一整天，主要情况是连接数较低。我想完全删除项目，然后使用加载，但我无法删除项目，因为图库会崩溃(这是一个灵活的网站，我无法删除项目，所有项目都会崩溃)。现在我做了一个小gif，但是……捂脸，抱歉。

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

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