javascript - 关于js做图片缓存问题

问题描述

问 题

场景是这样：商品详情里有非常多的详情图片，在页面加载的过程中，资源加载变得很慢。
商品----详情----适用车型 对应三个page，而且是swiper来的。
我的思考是懒加载，但是这些产品图片是后端一串div>img...img..,这样进来的，

那么问题来了：
我现在的思考是div>img的width=0，这样图片就不加载了，在点击头部的nav时width=auto。
1.懒加载我拿不到img的属性 attr truesrc...不然可以用lazyload。
2.想知道有没有其他的方法。改接口？(后端是php，include吗)，异步也是一个问题。

解决方案

描述的挺混乱,没有明白.
优选方法:改模板的输出标签,img用data-src再lazy.
如果无法改动输出,比如用jq,ready的时候 #id img修改src为data-src,再用lazy.
仅css中width:0,不是不加载而是不显示而已.
不过最好的办法是分段ajax,最省流量显示也快速.比如点击商品详情,ajax详情内容,当下拉时,再依次载入正文.

这篇关于javascript - 关于js做图片缓存问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！