Question

我用这个脚本创建了这个简单的网站......

    <script type="text/javascript">
    var photos = ["indexphotos/1.jpg", "indexphotos/2.jpg", "indexphotos/3.jpg", "indexphotos/4.jpg",
            "indexphotos/5.jpg"];
    var currentPhoto = 1;
    setInterval(function(){
        $('#content img').fadeOut(400, function() {
            if(currentPhoto == 5) {
                currentPhoto = 0;
            }
            $('#content img').attr("src",photos[currentPhoto]);
            currentPhoto++;
            $('#content img').fadeIn(400);
        });
    },5000);
</script>

播放幻灯片，播放和淡出5张照片中的照片。当我在本地开发它时它工作正常，但现在当它在服务器上运行时它正在打嗝。它会逐渐淡出然后回到相同的图片，然后最终切换到新的图片，即使它想要在图片淡入之前切换到图片。就像fadein和fadeout比实际更改图片更快。

如果您刷新页面一次，它可以正常工作。

有没有办法更好地做到这一点，所以这不会发生？

Answer 1

尝试为图片添加onload处理程序，只有在加载图片后才会淡入（更改src后）

$("#content img").one("load", function() {
    $(this).fadeIn(); //fade in after loading image
}).attr("src", whatever); //change ti another image

PS。 .one在这里不是一个错字。

jQuery fadeOut和fadeIn不在现场工作，fadeOut / fadeIn比我的实际图片更快可以改变

1 个答案: