图片懒加载涉及到轮播图的问题,求解!

我是用的是jquery.lazyload这个插件,发现如果对轮播图里面的img使用懒加载的话,除了第一屏之外的图片都无效,有人遇到过这个问题吗?

阅读 5.5k
1 个回答

好久之前的了,当时好像放弃了轮播图像的懒加载,但是现在想想应该是很简单的了,自己在轮播的回调函数里面处理一下就行了,当下一帧准备进入视野,轮播插件会调用指定的回调,在回调里面你判断一下当前对应的图片是否加载(默认放上Loading图片),没有加载则将真实图片路径赋值给该元素,就解决了

关于这个问题,其实是由于轮播滚动出现的图片并不在lazyload插件判断的预期条件里面,上面就是针对这一问题作出的独立判断,其实别的懒加载插件有处理这个问题,比如echo

echo.render();
Echo's callback render() can be used to make Echo poll your images when you're not scrolling, for instance if you've got a filter layout that swaps images but does not scroll, you need to call the internal functions without scrolling. Use render() for this: echo.render();

说的很清楚了,就是类似需要懒加载的图片出现了轮播里面的这种情况,lazyload的我后面几乎没用了,不过我在他的文档里面看见这个,不确定会不会强制加载所有图片,你可以试试,如果是的话,那只能说明这个插件考虑不周了。

To force loading of all images use loadimages().
let lazy = lazyload();
lazy->loadImages();
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题