jQuery preload仅适用于刷新

Question

我遇到问题，ie9并不总是加载预加载的图像。 有时我会刷新页面，然后就可以了。

$jQuery.fn.img_preloader = function(options){
    var defaults = {
        repeatedCheck: 550,
        fadeInSpeed: 1100,
        delay: 200,
        callback: ''
    };
    var options = jQuery.extend(defaults, options);
    return this.each(function(){
        var imageContainer = jQuery(this),
            images = imageContainer.find('img').css({opacity:0, visibility:'hidden'}),
            imagesToLoad = images.length;               
            imageContainer.operations = {   
                preload: function(){    
                    var stopPreloading = true;
                    images.each(function(i, event){ 
                        var image = jQuery(this);

                        if(event.complete == true){ 
                            imageContainer.operations.showImage(image);
                        }else{
                            image.bind('error load',{currentImage: image}, imageContainer.operations.showImage);
                        }

                    });
                    return this;
                },showImage: function(image){   
                    imagesToLoad --;
                    if(image.data.currentImage != undefined) { image = image.data.currentImage;}

                    if (options.delay <= 0) image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);

                    if(imagesToLoad == 0){
                        if(options.delay > 0){
                            images.each(function(i, event){ 
                                var image = jQuery(this);
                                setTimeout(function(){  
                                    image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);
                                },
                                options.delay*(i+1));
                            });

                            if(options.callback != ''){
                                setTimeout(options.callback, options.delay*images.length);
                            }
                        }else if(options.callback != ''){
                            (options.callback)();
                        }
                    }
                }
            };
            imageContainer.operations.preload();
        });
    }

Answer 1

尝试评论event.complete验证并直接转到showImage事件。这不是最好的解决方案，但对我有用。

$jQuery.fn.img_preloader = function(options)
{
   var defaults = {
     repeatedCheck: 550,
     fadeInSpeed: 1100,
     delay: 200,
     callback: ''
   };
   var options = jQuery.extend(defaults, options);
   return this.each(function()
   {
    var imageContainer = jQuery(this),
        images = imageContainer.find('img').css({opacity:0, visibility:'hidden'}),
        imagesToLoad = images.length;               
        imageContainer.operations = {   
            preload: function(){    
                var stopPreloading = true;
                images.each(function(i, event){ 
                    var image = jQuery(this);

                    imageContainer.operations.showImage(image);
                    /*if(event.complete == true){ 
                        imageContainer.operations.showImage(image);
                    }else{
                        image.bind('error load',{currentImage: image}, imageContainer.operations.showImage);
                    }*/

                });
                return this;
            },showImage: function(image){   
                imagesToLoad --;
                if(image.data.currentImage != undefined) { image = image.data.currentImage;}

                if (options.delay <= 0) image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);

                if(imagesToLoad == 0){
                    if(options.delay > 0){
                        images.each(function(i, event){ 
                            var image = jQuery(this);
                            setTimeout(function(){  
                                image.css('visibility','visible').animate({opacity:1}, options.fadeInSpeed);
                            },
                            options.delay*(i+1));
                        });

                        if(options.callback != ''){
                            setTimeout(options.callback, options.delay*images.length);
                        }
                    }else if(options.callback != ''){
                        (options.callback)();
                    }
                }
            }
        };
        imageContainer.operations.preload();
    });
}

Answer 2

替换此showimage函数..

 showImage: function (g) {
  d--;

  if (g.data.currentImage != undefined) {
      g = g.data.currentImage;                      

  }

  if (b.delay <= 0) {
      g.css("visibility", "visible").animate({
          opacity: 1
      }, b.fadeInSpeed);

  }
  if (d != 0) {
      if (b.delay != 0) {
          e.each(function (k, j) {
              var h = a(this);
              setTimeout(function () {
                  h.css("visibility", "visible").animate({
                  opacity: 1
                  }, b.fadeInSpeed)
              }, b.delay * (k + 1))
          });
          if (b.callback != "") {
              setTimeout(b.callback, b.delay * e.length)
          }
      } else {
          if (b.callback != "") {
              b.callback()
          }
      }
  }
}