图片懒加载的问题?


我现在在做一个图片懒加载。

首先,页面载入时,img标签有两个属性,一个src是一张默认图片,一个data-src是图片的真实地址。

然后循环图片,通过滚动页面,监听图片是否到达可视区域,如果到了,就把图片的data-src的值赋给src。

经过测试没有问题,达到了图片懒加载。

但是,后来发现页面里存在tab切换,因为tab中其他的div项是默认隐藏的(display:none),因此无法获取隐藏div中图片的offsetTop,从而导致页面载入时,这些隐藏div的图片就直接加载了,请问如何解决隐藏div的图片和其他图片一样到达位置才加载(或者鼠标经过隐藏div,显示div后再把图片的data-src的值赋给src)。

web前端开发 JavaScript 前端优化

绯色的兔子先生 9 years, 8 months ago

隐藏 div 中的那些图片的真实 src 也是写在 data-src 里的是么?那在页面载入的适合应该不会自动加载呀。

话说对于隐藏的内容,在未显示之前可以根本不用管他们。总会有一个触发机制让隐藏的内容显示出来,你在触发的时候再根据情况加载即可。

如一个二级菜单里的图片,那么当二级菜单触发显示出来的时候,你再去加载图片即可。

机灵的狗腿子 answered 9 years, 8 months ago

Your Answer