图像预加载器问题

时间:2010-09-27 07:45:21

标签: jquery jquery-ui

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

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

2 个答案:

答案 0 :(得分:1)

jQuery API .load()

引用
  

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

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

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

更新回答

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

所需的更改

  1. 在设置图像的src属性之前设置加载事件
  2. 如果图片已完成加载,则手动触发加载事件
  3. 在绑定load事件时使用one()方法来补偿直接使用#1的不同浏览器(不需要#2)而不使用其他浏览器(我们只希望加载一次)
  4. 修正增加图像计数器的方式。
  5. 本质上我们结合了我建议的技巧和你自己的解决方法,但也引入了一个变化,因为每个技巧都适用于不同的浏览器,我们只想使用两个技巧中的一个,而不是两个。

答案 1 :(得分:0)

jQuery docs中记录了这一点。

  

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

Plugin

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