webkit 内核浏览器,<img>异步加载相同URL,不触发load事件的BUG

      最近一个项目的前端部分是依靠img.onload 来实现的.可是经常会出现加载不出图片的情况 ,由于出现相邻两次加载相同图片的概率很小,所以一直没能还原bug,让人头疼很久.昨天实在是忍不了了,在猎豹浏览器上疯点几千下,终于终结出问题的根源:相邻两次加载相同的src 属性 .不触发 onload 事件.chrome\qq 等使用webkit内核的浏览器都会出现这种情况.

      自己写了一个小程序测试了下.发现的确是这个样子

    测试程序:

 img.onload = function ()
    {
        count++;
    }
    for (var i = 0; i < 100; i++)
    {
        img.src = "new src";
        count1++;
    }
    //在 webkit 内核浏览器下 count 和count1 会出现差异.ff 和ie 下没有问题.

解决办法:

 var img = new Image();//在每次 服务器回发 中 均新创建一个Image对象
    img.src = "赋值";     //将新内容赋值给新创建的Image对象
    img.οnlοad=function()
    {
        //需要在图片加载的过程中执行的代码
        //这个位置的代码就可以都执行了
    }
    old_img.src = img.src;//对原来的 img标签src 属性赋值

 

转载于:https://www.cnblogs.com/lijinghui/archive/2012/11/18/2775536.html