【问题标题】:Binding onload event on image object in jQuery在jQuery中的图像对象上绑定onload事件
【发布时间】:2020-06-05 23:35:08
【问题描述】:

我的网站上有以下代码:

 backgroundImages[bg_img_path_b]=new Image();
 backgroundImages[bg_img_path_b].src =     bg_img_path_b;
 backgroundImages[bg_img_path_b].loaded="loading";
 //jQuery(backgroundImages[lastImage]).unbind('load.backgroundImages');                                         

 jQuery(backgroundImages[bg_img_path_b]).bind('load.backgroundImages',function(){
      if(typeof callback=='function'){
           callback.call(this, bg_img_path_b);
           if(showLoading) hideLoadingDC();
      }
 }).bind('load.cache', function(){
                            backgroundImages[bg_img_path_b].loaded="true";
                        });;

有用作页面包装器背景图像的大型图库。由于速度原因,我需要预加载图像(图像非常大)。所以我有了这段代码(实际上只是更大功能的一部分,它包装了缓存等,但是当图像不在缓存中时会触发这几行)。

backgroundImages是Image对象的大数组,key是path就是图片的路径。每个 Image 对象都有我的属性“已加载”,它表示图像是否已经加载,或者当前处于加载状态。

从我的代码中可以看出,我在加载图像时调用回调函数(背景发生变化等)

但是我有一个问题,IE

我真的不知道哪里可能出错,在除旧版 IE 之外的所有浏览器中都可以正常工作..

实际上我需要调试事件是否正确绑定,但是在调试器的加载项下我在IE和Chrome中都看不到它:(

请帮助我完全搞砸了,真的不知道该怎么办。

【问题讨论】:

  • 旧版 IE 和 Opera(如果我没记错的话)已知不会在从浏览器缓存加载图像时触发 onload。这可以解释你“第一次,工作,从那时起,不工作”的经历。
  • 其实我表达错了..我的意思是在第二次调用函数时..无论图像是否在缓存中..

标签: javascript jquery onload jquery-events


【解决方案1】:

所以几天前我终于找到了解决我的问题的方法。我似乎是先绑定onload事件然后设置Image的url,或者先设置url然后绑定事件。 . 示例

var photo = new Image();
photo.url = "http://www.something.com/something.jpg";
$(photo).bind('load',doSomething());


var photo = new Image();
$(photo).bind('load',doSomething());
photo.url = "http://www.something.com/something.jpg";

第一个变体通常可以正常运行,但有时它会失败(在较旧的 IE 中)。但第二个变体肯定可以正常工作..

【讨论】:

  • 第一个变体可能会失败,因为有时加载是在转到第三行之前完成的。我认为第二种变体更好。
  • 不应该是.src而不是.url吗?
【解决方案2】:

您使用的是哪个 jQuery API 版本?尝试使用最新版本的 jQuery。

否则,使用这个简单的 JavaScript 代码在 body onload 调用你的函数时加载图像:

var myimages = new Array();
var path = "images/gallery/";

function preloadimages() {
    for (i = 0; i < preloadimages.arguments.length; i++) {
        myimages[i]=new Image();
        myimages[i].src=path+preloadimages.arguments[i];
    }
}

// Enter name of images to be preloaded inside parenthesis with douable quotes. 
// Extend list as desired with comma.
preloadimages("gImg1.jpg","gImg2.jpg","gImg3.jpg","gImg4.jpg" /*, etc...*/);

【讨论】:

  • 我不确定它是否有帮助..我需要按需下载图像,而不是一次下载..这是该站点的链接..designclub.cz 尝试在 IE
  • 这个脚本只是为了加载所有的图片。
  • 是的,我明白了,但我只提前获取 1 张图片
  • 这个脚本只是加载所有图片并缓存。您可以使用以下命令调用每个图像: function showImage(strImage) { var imgPath = "images/gallery/" + strImage, true; document.getElementById("imgHover").style.background = imgPath ;和 onclik 事件你可以这样调用:javascript:showImage('gImg11.jpg');
  • Sima:我用这个脚本为你创建了一个例子。点击链接查看:designworks.com.pk/example/background --- 谢谢!
猜你喜欢
  • 2020-07-18
  • 1970-01-01
  • 2011-03-27
  • 1970-01-01
  • 2012-04-24
  • 2013-12-19
  • 2011-08-28
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多