首页 > 前端显示客户要求不分页展示产品。网页打开很慢。如何解决。

前端显示客户要求不分页展示产品。网页打开很慢。如何解决。

比如数据库里面客户添加了1000张图片。本来做的一个分页显示。,现在客户不要分页。要一次吧所有产品图片展示出来。这时候网页打开就会很慢。如何处理这种情况。


我觉得客户可能是需要你实现类似于新浪微博那样的功能,可以一直往下拖显示新得内容,感觉起来像在一个页面那种感觉。


懒加载+滚动加载,或者只使用滚动加载即可。

滚动加载的一个功能是,每次滚动条快要滚动到底部时,向接口请求图片地址,比如每次请求30个地址,然后js把请求到的图片地址拼接成完整的html语句插入遇到页面中。

懒加载+滚动加载:每张图片初始时就像下面的这种方式,默认显示1px*1px的占位图片,用一个字段存储图片的真实地址,当用户快要滚动到这个图片的位置之前,把lazysrc字段的值给src,现在再开始请求图片。

html<img src="占位图片地址" lazysrc="真实图片地址" alt="" />

只使用滚动加载的意思是:img不再使用占位图片,直接把真实图片的地址给src。

html<img src="真实图片地址" alt="img" />

给你看看聚美海外购首页的滚动加载,注意滚动的变化:http://www.jumeiglobal.com/

总结一下就是:
1. 1000张图片分成多个请求加载到页面中,而不是一次性加载加载到页面中。
2. 使用懒加载,即先给图片一个占位图片的地址,当用户快要看到这个位置时,再展示真实的图片。


图片延迟加载是最好的选择,用默认的图片代替,当DOM结构加载完毕之后再进行图片加载就OK了~每页只显示一定数量的图片


延迟加载。jQuery Lazy Load 图片延迟加载

【热门文章】
【热门文章】