Javascript JQuery 图片预加载load事件IE不兼容的问题的解决方法

最新推荐文章于 2020-12-24 17:16:08 发布

d_einstein

最新推荐文章于 2020-12-24 17:16:08 发布

阅读量2.7k

点赞数

分类专栏： ASP/ASP.Net 文章标签： Javascript JQuery 图片加载不兼容

本文链接：https://blog.csdn.net/d_einstein/article/details/8689790

版权

ASP/ASP.Net 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

由于IE7、IE8之类的浏览器兼容性实在太差，经过测试，在使用图片预加载技术时，对JQuery的load事件，Image对象的onload事件，由于缓存的原因不会执行，导致程序在页面后退，或者动态生成过程中显示不正常。实在郁闷，把这些用户都排除在外又显得不人道。

经测试，类似如下写法，都有问题：

JQuery 写法：

 
        $( 
        "<img>" 
        ,{ 
       
        src:  
        "http://www..." 
        , 
       
        load: 
        function 
        (e){ 
       
        } 
       
        });

Javascript 写法：

 
        var  
        img =  
        new  
        Image(); 
       
        img.src =  
        "http://www..." 
        ; 
       
        img.onload =  
        function 
        (){ 
       
        }

这些写法在IE10，以及Firefox，Chrome里都能运行正常，但IE8及以下就不行了，网上找了很多源码，基本都是这种方法，全没用。

经过不断测试，总算有找到了解决方案，分享给大家。

HTML代码：

 
   
        < 
        div  
        id 
        = 
        "pic_loader"  
        style 
        = 
        "visibility:hidden;width:0px; height:0px; overflow:hidden;" 
        ></ 
        div 
        > 
       
 
 

*注意 overflow:hidden 属性非常重要，如果不溢出的话，得不到Img的属性

 
        function  
        load_pic(obj_id,src){ 
       
        var  
        img_str =  
        "<img border=0 src=\""  
        + src +  
        "\" onload=\"pic_onload("  
        + obj_id+  
        ",'"  
        + src +  
        "',"  
        + max_width+  
        ",this);\" />" 
        ; 
       
        var  
        loader = document.getElementById( 
        "pic_loader" 
        ); 
       
        loader.innerHTML += img_str; 
       
        } 
       
        function  
        pic_onload(obj_id,src,max_width,obj){ 
       
        if 
        (obj.width > max_width){ 
       
        $( 
        "#"  
        + obj_id).width(max_width); 
       
        $( 
        "#"  
        + obj_id).height(max_width); 
       
        $( 
        "#"  
        + obj_id).attr( 
        "src" 
        ,src); 
       
        } 
        else 
        { 
       
        $( 
        "#"  
        + obj_id).attr( 
        "src" 
        ,src); 
       
        } 
       
        obj.parentNode.removeChild(obj); 
       
        }