TypeError: 无法设置未定义或 null 引用的属性“src” ——IE浏览器不兼容图片懒加载vueLazy
异常分析:
谷歌浏览器访问正常,IE浏览器访问部分图片无法正常展示,查看控制台,输入如下错误信息:

经分析,只有使用过图片懒加载的地方图片展示才有问题,那么就应该是图片懒加载vue-lazyload这个组件在IE浏览器下不兼容了。
解决方法:
既然不兼容,暂时没有其他比较好的替代方案,那就先对IE浏览器环境做特殊处理了。
由于我们是在标签中通过v-lazy指令调用懒加载的,那么如果是IE浏览器环境,v-lazy这个指令就无法正常工作了,那就需要我们自己添加lazy指令,把v-lazy的value赋给标签的src属性就可以了,具体代码如下:
//图片懒加载
import vueLazy from "vue-lazyload";
var userAgent = window.navigator.userAgent;
if(userAgent.indexOf('NET') != -1) {
//ie浏览器不兼容懒加载组件处理
Vue.directive('lazy', function(el, binding) {
el.src = binding.value
})
} else {
//实现图片懒加载
Vue.use(vueLazy, {
preLoad: 0.8,
attempt: 3,
loading: common.blankImg,
listenEvents: ["scroll"],
lazyComponent: true
});
}
TypeError: 无法设置未定义或 null 引用的属性“src” ——IE浏览器不兼容图片懒加载vueLazy的更多相关文章
- zDialog无法获取未定义或 null 引用的属性“_dialogArray”
zDialog无法获取未定义或 null 引用的属性"_dialogArray" 贴出错误:这个错误是从IE浏览器的控制台复制出来的. zDialog无法获取未定义或 null 引 ...
- 无法获取未定义或 null 引用的属性“contentWindow”
在iframe 中有时候 这样使用contentWindow 会报 无法获取未定义或 null 引用的属性“contentWindow” 这种情况 我是在IE中遇到 其他浏览器一切正常. pa ...
- [原创]如何解决IE10下CkEditor报 --- SCRIPT5007: 无法获取未定义或 null 引用的属性“toLowerCase”
如何解决IE10下CkEditor报 --- SCRIPT5007: 无法获取未定义或 null 引用的属性“toLowerCase” 错误 如果你的IE是IE10,且不是运行在IE的兼容模式你也许会 ...
- Error-JavaScript-SCRIPT5007: 无法获取未定义或 null 引用的属性“style”
ylbtech-Error-JavaScript-SCRIPT5007: 无法获取未定义或 null 引用的属性“style” 1.返回顶部 - document.getElementById(&qu ...
- telerik 控件 SCRIPT5007: 无法获取未定义或 null 引用的属性“documentElement” (IE 文档模式)
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有 ...
- innerHTML用法及错误:无法设置未定义或null引用的属性“innerHTML”解决
在使用ActionCable时, app/assets/javascripts/channels/calladdresses.coffee: App.calladdress = App.cable.s ...
- JavaScript 运行时错误: 无法获取未定义或 null 一种解决方案
脚本是肯定没有错误的!! 引用了高版本的jquery jquery-1.10.1.min.js 但在ie10下面就是报错 "JavaScript 运行时错误: 无法获取未定义或 null & ...
- vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title
1.config index.js下面的跨域代理设置: proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: ...
- iOS之weak和strong、懒加载及循环引用
一.weak和strong 1.理解 刚开始学UI的时候,对于weak和strong的描述看得最多的就是“由ARC引入,weak相当于OC中的assign,但是weak用于修饰对象,但是他们都不会造成 ...
随机推荐
- golang:send mail using smtp package
go语言发送邮件,可以使用smtp包,两个关键函数: func PlainAuth(identity, username, password, host string) Auth func SendM ...
- day13-文件操作
1.打开与关闭 1.1.open() close()我们使用 open() 函数打开文件.这个函数将返回一个文件对象,我们对文件的读写都将使用这个对象.open() 函数需要三个参数,第一个参数是文件 ...
- MFC中在picture control中显示CBitmap图像的方法
CStatic *pStatic1 = (CStatic *)GetDlgItem(IDC__IMAGE_STATIC2); CBitmap cbmp; cbmp.LoadBitmap(MAKEINT ...
- javascript:查看一个图片是否加载完成
查看一个图片是否加载完成:<img id="img1" src="http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg" ...
- golang使用Nsq(转)
为什么要使用Nsq 最近一直在寻找一个高性能,高可用的消息队列做内部服务之间的通讯.一开始想到用zeromq,但在查找资料的过程中,意外的发现了Nsq这个由golang开发的消息队列,毕竟是golan ...
- ReactiveX 学习笔记(6)条件操作符
Conditional and Boolean Operators 本文的主题为处理 Observable 的条件和布尔操作符. 这里的 Observable 实质上是可观察的数据流. RxJava操 ...
- 关于T-SQL中exists或者not exists子查询的“伪优化”的做法
问题起源 在使用t-sql中的exists(或者not exists)子查询的时候,不知道什么时候开始,发现一小部分人存在一种“伪优化”的一些做法,并且向不明真相的群众传递这一种写法“优越性”,实在看 ...
- delphi注册热键方法(一)
uses windows,menus; ..... //声明 HotKey_Key: Word; HotKey_Shift: Word; procedure WMHotKey(var msg : Tm ...
- java axis2 webservice
http://clq9761.iteye.com/blog/976029/ 这篇文章写的是最全的,也是最好的.无须下一步下一步操作来操作去,写类直接调试,非常好!
- Java学习02 (第一遍)
巩固基础: byte 1个字节 -128到127 = 2^(字节数*8-1),转变2进制,01111111(负127)到11111111(正127) ,存在正负零(00000000),正零保留,负零补 ...