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用于修饰对象,但是他们都不会造成 ...
随机推荐
- cookies_ajax
views def test_user(request): print('start') if request.method=='POST': print('goon_test_user') user ...
- tomcat监控脚本(监控进程,测试接口,告警动作为发送邮件)
服务器环境:centos7.2 64位 tomcat8.5.6 tomcat 监控功能共需要两个脚本,如下: initMonitor.sh #!/bin/sh #初始化监控脚本相关变量 export ...
- cookie操作:设置cookie、读取cookie、删除cookie
一.设置cookie function setCookie(name, value){ Days = 1; var exp = new Date(); exp.setTime(exp.getTime( ...
- zatree的安装
zatree的安装有2种 一种是支持2.x的用以下方法安装 zabbix安装zatree 实现图形树状化 官网:https://github.com/spide4k/zatree [root@SERV ...
- 【381】python 获取列表中重复元素的索引值
参考:获取python的list中含有重复值的index方法_python_脚本之家 核心思想:建立字典,遍历列表,把列表中每个元素和其索引添加到字典里面 cc = [1, 2, 3, 2, 4] f ...
- mysql分表实战
本文主要讲述如何使用存储过程完成本表.并不讨论其他问题.首先我们得看看手册上关于meger引擎的说明: MERGE存储引擎,也被认识为MRG_MyISAM引擎,是一个相同的可以被当作一个来用的MyIS ...
- Hibernate学习笔记2.3(Hibernate基础配置)
映射,注释可以放在成员变量上面,也可以放在get方法上面 写在成员变量的话 破坏了java的面向对象思维 直接让hibernate访问内部的私有元素 要是能直接设指不合适哈哈 所以主张写在get方法上 ...
- Module build failed: Error: Cannot find module 'url-loader' 的坑
本文地址:http://www.cnblogs.com/jying/p/8280956.html 开发环境:react.webpack.es5 引用图片报错:Module build failed: ...
- google image
google图片抓取 google图片是base64加密的,而且base64后的信息放在script信息里面 import pymysql from lxml import etree import ...
- ubuntu16 安装openssh-server 一直安装不上Unable to correct problems, you have held broken packages
zengqi@zengqi:~$ sudo apt-get install openssh-server Reading package lists... DoneBuilding dependenc ...