Php 图像替换

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

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

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

我不能使用preCache所有的图片，因为如果产品数量超过100个项目，网站将全天加载，主要情况下连接数较低。我想完全删除项目，然后使用load，但我无法删除项目，因为库将崩溃（这是一个灵活的网站，我无法删除项目，所有项目都将崩溃）。现在我做了一点gif，但是。。。脸掌，对不起

---

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

我会等到下一张图像加载后再淡入，比如：

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

---

我会在单击时立即开始加载新图像（到临时图像对象中），这样它就可以更快地使用（甚至在淡出完成之前），而不是等到您真正需要它时才开始加载。这将使图像进入浏览器缓存，因此当您分配真实图像的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();
    });
});

---

我不能使用load，我告诉过它会使结构崩溃，如果你删除firebug中的图像，你可以看到它。我照你说的做了，你可以在单击“旋转”图标时看到它，我认为显示中的主要问题是：无，fadeIn/Out它不是可见性更改…删除此部分并尝试

loadFail=setTimeout（function（）{$（'img'）。fadeIn(“slow”）；}，4000）；

这是一个很好的解决方案，我使用了它，但是当图像有显示时它仍然会破坏结构：无属性，灵活性不好的一面…完成了！我创建了div holder，但元素太多了…（无论如何，谢谢大家）@Tolan-“破坏结构”是什么意思？显示：无造成什么问题？