Question

当我在jQuery中创建一个图像时，使用.attr（）设置i的attributs，然后等待它加载.load（），然后动画脚本在IE中随机停止。它始终在.load（）之前失败。

非常感谢任何帮助。即使采用不同的做事方式也会有所帮助。

感谢。

       $('<img />')
       .attr({
     src: new_src,
     width: '820',
     height: '575',
     alt: '',
     'class': 'bg_image'
    })
       .load(function(){
     //append image to #main2
     $('#main2').append( $(this) );
     //animate backgrounds
     $("#main2").animate({left: $main_left + "px"}, 'slow');
     $("#main").animate({left: new_left + "px"}, 'slow', function() {
      if($rand){
       document.location = $href + '?i=' + $rand;
      } else {
       document.location = $href;
      }
     });
       });

Answer 1

你需要稍微调整一下，如下：

$('<img />').attr({
  src: new_src,
  width: '820',
  height: '575',
  alt: '',
  'class': 'bg_image'
}).one('load', function(){
  //append image to #main2
  $('#main2').append(this);
  //animate backgrounds
  $("#main2").animate({left: $main_left + "px"}, 'slow');
  $("#main").animate({left: new_left + "px"}, 'slow', function() {
      document.location = $rand ? $href + '?i=' + $rand : $href;
  });
}).each(function() {
  if(this.complete) $(this).load();
});

这里的关键是load事件在某些浏览器中不会从缓存中加载，因为load在设置src时立即发生，< em>在之前绑定了.load()处理程序。

为了解决这个问题，我们使用.one()确保load处理程序只运行一次，然后在创建图像后，我们循环遍历，如果它们是.complete （最有可能从缓存加载）我们正在调用.load()以确保事件处理程序运行。

Answer 2

您需要做两件事：

设置 src 之后的onload 处理程序，以确保在您附加处理程序之前未触发event

设置 error事件的处理程序链接可能已损坏，您必须处理

<强>代码

$('<img />').attr({ width: '820', height: '575', alt: '', 'class': 'bg_image' }).load(function () { //append image to #main2 $('#main2').append(this); //animate backgrounds $("#main2").animate({ left: $main_left + "px" }, 'slow'); $("#main").animate({ left: new_left + "px" }, 'slow', function () { document.location = $href; document.location += $rand ? '?i=' + $rand : ''; }); }).error(function(){ // simply redirect on error document.location = $href; document.location += $rand ? '?i=' + $rand : '' }).attr("src", new_src); // set the src last

仅在IE中随机创建图像失败

2 个答案: