欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用图片懒加载lazyload,在Microsoft Edge浏览器中图片不显示

程序员文章站 2022-05-25 19:37:40
...

最近去公司一个老项目支持两天,帮忙改了一些bug。前端这边使用的是jQuery,三年前的项目了。测试提出首页中部分图片在Microsoft Edge浏览器不显示。由于首页图片较多,前端这边使用了图片懒加载lazyload。使用方式:

<img class="lazyload" data-src="图片路径" />

这样在项目中使用,谷歌浏览器,新版本Microsoft Edge以及Internet Explorer都可以正常使用,唯独Microsoft Edge也就是ie11不能显示。图片懒加载lazyload在实现思路,是在图片显示时从data-src中取值,并设置给图片src的值。但是在ie11中,即使滑动到图片位置,图片也并未被设置src。控制台查看也无报错,百思不得其解,早期开发同事早已离职。

在网上找了很多解决方式,都未解决。最后发现项目中有些图片使用了lazyload在ie11中是可以正常显示的。经过对比发现,可以显示图片标签带有alt属性。

<img class="lazyload" data-src="图片路径" alt="图片" />

 alt属性是<img>元素的必选属性,它给出了图像的备选文本,供图像无法显示时采用。

但是不知道为什么项目中有些图片未添加该属性,而且该属性必须有值,不得为空,这样使用了懒加载的图片在ie11中才能显示。