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用于修饰对象,但是他们都不会造成 ...
随机推荐
- 深度学习原理与框架-卷积网络细节-经典网络架构 1.AlexNet 2.VGG
1.AlexNet是2012年最早的第一代神经网络,整个神经网络的构架是8层的网络结构.网络刚开始使用11*11获得较大的感受野,随后使用5*5和3*3做特征的提取,最后使用3个全连接层做得分值得运算 ...
- android的特点有哪些
android拥有完善的应用程序框架,支持4大应用组件activity,service,contentProvider,broadcast,可以在任意层次上进行复用和更换: android中java字 ...
- python 停止线程
Python没有提供方法去结束一个线程,无法给它发送信号,无法调整它的调度,也无法执行其他高级操作. 如果需要终止线程,需要通过编程让这个线程在某个特定点轮询来退出.但是如果一个线程一直阻塞在一个 I ...
- ACM__并查集
并查集是树型的数据结构,处理不想交集合 主要解决查找和合并的问题 步骤: 初始化 把每个点所在的集合初始化为自身 复杂度为O(N) 查找 查找元素所在的集合,即根节点 合并 将两个元素所在的集合合并在 ...
- 解决error: only position independent executables (PIE) are supported
在Android.mk文件中添加以下内容 LOCAL_CFLAGS += -pie -fPIE LOCAL_LDFLAGS += -pie -fPIE 原帖地址:http://blog.csdn.ne ...
- Ubuntu下的LNMP环境
保证联网的情况下,直接参照http://lnmp.org/install.html进行安装,以下花括号内为原文引用: { 1.使用putty或类似的SSH工具登陆VPS或服务器: 登陆后运行:scre ...
- ajaxfileupload.js上传文件兼容IE7及以上版本
要兼容IE789,要修改ajaxfileupload.js;要将此处的代码替换掉 if(window.ActiveXObject) { var io = document.createElement( ...
- ANg-线性回归算法
线性回归算法 linear regression 对于线性回归模型,我们期望对于样本数据集,通过假设函数,得出目标值 代价函数 m在这里指的是训练样本的数量 所以我们的目的就是得出代价函数(平方误差代 ...
- JVM致命错误日志(hs_err_pid.log)分析
当jvm出现致命错误时,会生成一个错误文件 hs_err_pid<pid>.log,其中包括了导致jvm crash的重要信息,可以通过分析该文件定位到导致crash的根源,从而改善以保证 ...
- div 光标处插入内容
var Manager = { insertHtml: function(html, type) { var lastMemo = document.getElementById("memo ...