font-awesome在ie8下面显示异常的bug
2016-11-22 10:40
489 查看
/** * 2016.7.5 * 为了解决awesome在ie8下面显示异常 * 原理是通过轮询等待css加载完成后触发回调函数 * ex:↓ */ //<script type="text/javascript"> // $(function(){ // new myFixedClass().init({ // cssUrl:'//libs.baidu.com/fontawesome/4.0.3/css/font-awesome.min.css', // fontAweSomeDom:'[class*=fa-]' // }); // }) //</script> function myFixedClass(){} myFixedClass.prototype = { //配置 option:{ cssUrl:'',//css路径 fontAweSomeDom:'[class*=fa-]',//字体图标选择器 lnkId:false,//id charset:false,//编码 media:false//多媒体查询 }, //初始化函数 init : function(option){ var that = this; this.option = $.extend(true, this.option, option); //创建link节点 var styleNode = this.createLink(this.option.cssUrl, this.option.lnkId, this.option.charset, this.option.media); //轮询加载样式 this.styleOnload(styleNode, function() { // console.log('loaded'); //加载完成回调函数 //通过重新添加classname重载字体样式 setTimeout(function(){that.fixBefore(that.option.fontAweSomeDom)},1); }); }, //创建link节点 createLink : function(cssURL, lnkId, charset, media){ var head = document.getElementsByTagName('head')[0], linkTag = null; if (!cssURL) { return false; } linkTag = document.createElement('link'); // linkTag.setAttribute('id', (lnkId || 'dynamic-style')); linkTag.setAttribute('rel', 'stylesheet'); linkTag.setAttribute('charset', (charset || 'utf-8')); // linkTag.setAttribute('media', (media || 'all')); linkTag.setAttribute('type', 'text/css'); linkTag.href = cssURL; //加到head区域 head.appendChild(linkTag); return linkTag; }, //下面部分截取自seajs styleOnload : function(node, callback){ var that = this; // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } // polling for Firefox, Chrome, Safari else { setTimeout(function() { that.poll(node, callback); }, 0); // for cache } }, poll : function(node, callback){ var that = this; if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) { //webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { that.poll(node, callback); }, 1); } }, fixBefore : function(dom){ var obj = $(dom); if(obj.length>0){ obj.each(function(i,e){ var tmp = $(e).attr("class"); $(e).removeClass(); setTimeout(function(){ $(e).attr('class',tmp); },1); }) } } }
相关文章推荐
- spring-boot中font-awesome在ie8中不显示的问题
- IE8 font-awesome问题,不能重绘,在dom加载完后执行一下下面的代码图标就出来了
- IETESTER 0.4.10 在window7系统中IE7,IE8下面的alert()有关的bug
- [Bug Report] jQuery EasyUI 1.3 : Datagrid 插件在pageNumber初始值为2(或大于1的任何整数)时存在“页码输入框”显示异常,页码输入框始终为1。
- IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
- fontawesome图标不显示的原因
- 在web.config文件中,增加“type="APP.Modules.CommandModule,CommandModules"”节点会导致awesome font字体图标显示为方框框
- Ext.app.SearchField在IE8中显示异常的问题
- nginx环境下bootstrap中font-awesome图标不显示的问题
- BOOTSTRAP时间控件显示在模态框下面的bug修复
- cocos2d-x在IOS7下面文字显示异常的解决办法
- Android使用Font Awesome显示小图标(二)
- [Bug Report] jQuery EasyUI 1.3 : Datagrid 插件在pageNumber初始值为2(或大于1的任何整数)时存在“页码输入框”显示异常,页码输入框始终为1。
- RB1001: IE6 IE7 IE8(Q) 负边距 (margin) 导致元素溢出 hasLayout 容器时显示异常
- cocos2d-x在IOS7下面文字显示异常的解决办法
- BOOTSTRAP时间控件显示在模态框下面的bug修复
- 一例flash在Safari浏览器显示异常的bug
- cocos2d-x在IOS7下面文字显示异常的解决办法
- Font Awesome 在IE8下使用
- springmvc+font-awesome开发出的页面显示方框乱码的解决方法