异常分析:

谷歌浏览器访问正常,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的更多相关文章

  1. zDialog无法获取未定义或 null 引用的属性“_dialogArray”

    zDialog无法获取未定义或 null 引用的属性"_dialogArray" 贴出错误:这个错误是从IE浏览器的控制台复制出来的. zDialog无法获取未定义或 null 引 ...

  2. 无法获取未定义或 null 引用的属性“contentWindow”

    在iframe 中有时候 这样使用contentWindow 会报   无法获取未定义或 null 引用的属性“contentWindow”   这种情况 我是在IE中遇到 其他浏览器一切正常. pa ...

  3. [原创]如何解决IE10下CkEditor报 --- SCRIPT5007: 无法获取未定义或 null 引用的属性“toLowerCase”

    如何解决IE10下CkEditor报 --- SCRIPT5007: 无法获取未定义或 null 引用的属性“toLowerCase” 错误 如果你的IE是IE10,且不是运行在IE的兼容模式你也许会 ...

  4. Error-JavaScript-SCRIPT5007: 无法获取未定义或 null 引用的属性“style”

    ylbtech-Error-JavaScript-SCRIPT5007: 无法获取未定义或 null 引用的属性“style” 1.返回顶部 - document.getElementById(&qu ...

  5. telerik 控件 SCRIPT5007: 无法获取未定义或 null 引用的属性“documentElement” (IE 文档模式)

    IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有 ...

  6. innerHTML用法及错误:无法设置未定义或null引用的属性“innerHTML”解决

    在使用ActionCable时, app/assets/javascripts/channels/calladdresses.coffee: App.calladdress = App.cable.s ...

  7. JavaScript 运行时错误: 无法获取未定义或 null 一种解决方案

    脚本是肯定没有错误的!! 引用了高版本的jquery jquery-1.10.1.min.js 但在ie10下面就是报错 "JavaScript 运行时错误: 无法获取未定义或 null & ...

  8. vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title

    1.config index.js下面的跨域代理设置: proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: ...

  9. iOS之weak和strong、懒加载及循环引用

    一.weak和strong 1.理解 刚开始学UI的时候,对于weak和strong的描述看得最多的就是“由ARC引入,weak相当于OC中的assign,但是weak用于修饰对象,但是他们都不会造成 ...

随机推荐

  1. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  2. Others-大数据平台Lambda架构浅析(全量计算+增量计算)

    大数据平台Lambda架构浅析(全量计算+增量计算) 2016年12月23日 22:50:53 scuter_victor 阅读数:1642 标签: spark大数据lambda 更多 个人分类: 造 ...

  3. C++17尝鲜:variant

    variant variant 是 C++17 所提供的变体类型.variant<X, Y, Z> 是可存放 X, Y, Z 这三种类型数据的变体类型. 与C语言中传统的 union 类型 ...

  4. Python 数据结构基本操作

    数据结构是用来存储数据的逻辑结构,合理使用数据结构才能编写出优秀的代码.本文主要介绍Python提供的几种内置数据结构,包括元组.列表.字典的定义和基本操作方法以及介绍典型函数的使用方法. 元组结构 ...

  5. centos中Mysql数据库导入sql文件

    1.对于文件的导入,在Centos下里面的是首先要新建一个和文件相同名字的数据库. mysql>create database Student; 2.切换到需要导入sql文件的数据库 mysql ...

  6. CHAR 和VARCHAR的区别

    CHAR(10)是不可变长度为10的字符串,占的存储空间始终为10个字符的长度,而VARCHAR(10)是可变长度的字符串,故而可以节省空间.例如:储存"aaaaabbbbb",则 ...

  7. jquery 初始化数据 添加html 第一次玩0.0

    /** * Created by Eee_xiang on 2018/04/12. * 联动响应事件 */ (function () { $.linkEvent = function (options ...

  8. atrous convolution

    atrous convolution 简而言之,带孔卷积: 来自:https://zhuanlan.zhihu.com/p/27470685 假设一个二维信号,每个位置对应的输出为和卷积核为,带孔卷积 ...

  9. jQuery之dom操作(取赋值方法)

    取赋值相关方法:                   .html() .text() .size()                   .addClass() .removeClass() .has ...

  10. oracle RMAN使用

    一步一步学RMAN 备份 RMAN连接上ORACLE,WINDOWS下在命令模式下 RMAN TARGET / 连接本地数据库用的是本地认证模式.RMAN连接数据库必须在dedicate模式下.因此在 ...