Question

我想出了这个代码并发现在第一次加载图像时，过渡工作正常，但第二次，转换不会出现。

    var imgIndex = 0;
    SlideImages();

    function SlideImages()
    {
        $("<img />").attr("src",theImages[imgIndex]).attr("style","display:none;").load(function(){

            $(this).appendTo("div.picCon");
            $(this).show("<?php echo $portfolioTransition; ?>",<?php echo $effectDuration; ?>,function(){
                setTimeout( hideImg,2000);
            });
        });            
    }

    function hideImg()
    {
        $("div.picCon img:visible").fadeOut(function(){
            $("div.picCon").empty();
            imgIndex = (imgIndex<theImages.length)?imgIndex+1:0;
            SlideImages();
        });

    }

所在的地方 $ portfolioTransition =“反弹”; $ effectDuration = 1000;

如果图像已经在缓存中，是否有任何方法可以执行？或者是否有任何替代方式，以便我的代码可以工作.. :)）

我让这个在野生动物园工作，但不是在铬..

 function SlideImages()
    {
        $("<img />").attr("src",theImages[imgIndex]).attr("style","display:none;").one("load",function(){
            $(this).appendTo("div.picCon");
            $(this).show("<?php echo $portfolioTransition; ?>",<?php echo $effectDuration; ?>,function(){
                setTimeout( hideImg,2000);
            });
        }).each(function(){
            if(this.complete)$(this).trigger("load");
        });
    }

Answer 1

从jQuery API .load()

引用

如果从浏览器缓存加载图像，则可能无法触发加载事件。

我相信在设置src属性之前设置加载处理程序可能会有所帮助。尝试将代码中的链顺序更改为

$("<img />").attr("style","display:none;");
            .load(function(){...})
            .attr("src",theImages[imgIndex])

更新回答

以下是完整的代码和演示工作正确（我相信）http://www.jsfiddle.net/HkXBw/

所需的更改

在设置图像的src属性之前设置加载事件
如果图片已完成加载，则手动触发加载事件
在绑定load事件时使用one（）方法来补偿直接使用＃1的不同浏览器（不需要＃2）而不使用其他浏览器（我们只希望加载一次）
修正增加图像计数器的方式。

本质上我们结合了我建议的技巧和你自己的解决方法，但也引入了一个变化，因为每个技巧都适用于不同的浏览器，我们只想使用两个技巧中的一个，而不是两个。

Answer 2

jQuery docs中记录了这一点。

如果从浏览器缓存加载图像，则可能无法触发加载事件。为了解释这种可能性，我们可以使用特殊的加载事件，如果图像准备就会立即触发。 event.special.load目前作为插件提供。

Plugin

我自己没有使用它，但似乎你可以在不更改代码的情况下包含该插件，因为它会拦截常规的加载事件。

图像预加载器问题

2 个答案: