图片数量较多的网站（电商）该如何优化

打开淘宝，第一感觉是加载速度还行，不会出现长时间等待页面还无法完全加载的情况。那么这是如何做到在图片量过多而不影响用户体验的呢？

下面给出自己在项目中总结的优化建议

1：懒加载

添加一个滚动条事件，判断图片位置、浏览器顶端的与页面的距离，如果前者小于后者就优先加载。

2：压缩

一：图片展示大小小于DOM元素大小，可以从服务端开始压缩至同等大小达到减小体积的效果。

二：如果图片过大，可以使用特殊编码格式的图片。加载中会先预先加载一张压缩过后的图片，提高用户体验。

3：预加载

我们通常会遇到相册、幻灯片、轮播图等，这里我们可以优先预加载前一张与后一张图片，提高用户体验。

4：CSS图片

如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。

5：精灵图

也叫雪碧图，整个页面的小图做一个合集，根据对应图片位置的不同设置对应的位置，极大减少加载数量

如果你有更好的建议欢迎在评论区留言

图片数量较多的网站（电商）该如何优化相关推荐

php语言电商网站,电商网站如何做多语言架构
现在有这么一个需求 1,一个电商平台要做多语言支持,主要就是商品要支持多种语言,也就是说,有一个商品id为100,默认显示简体中文,当我点击英文版的时候就显示该id为100的英文版本.所有的商品多种语 ...
大型网站电商网站架构案例和技术架构的示例
大型网站架构是一个系列文档,欢迎大家关注.本次分享主题:电商网站架构案例.从电商网站的需求,到单机架构,逐步演变为常用的,可供参考的分布式架构的原型.除具备功能需求外,还具备一定的高性能,高可用,可伸 ...
某网站电商运营数据分析案例
PHPStat是目前国内最专业的电子商务数据分析运营平台,专注为电子商务企业提供网站访客转化行为.订单分析.商品分析.页面转化分析.营销转化分析的整体优化解决方案.目前PHPStat已经成功为苏宁易购 ...
内网环境基于 k8s 的大型网站电商解决方案(一）
一.环境说明 1.所有系统为rockylinux8.6最小化安装,所有服务器均为内网,只有manager为双网卡(可访问互联网),提供内网yum源.DNS解析.时间同步等 2. k8s搭建高可用集群版 ...
Java电商秒杀系统性能优化(一)——电商秒杀系统框架回顾
电商秒杀系统框架回顾项目简介外部依赖框架回顾项目要点项目中存在的问题小结课程是免费的,课程地址如下:SpringBoot搭建电商秒杀项目,课程真的很棒,作者的思路很清晰,建议各位读者可以 ...
java电商秒杀深度优化_【B0796】Java性能优化亿级流量秒杀方案及电商项目秒杀实操2020视频教程...
Java视频教程名称:Java性能优化亿级流量秒杀方案及电商项目秒杀实操2020视频教程 java自学网[javazx.com] 性能视频教程 it教程 Java自学网收集整理 java论 ...
华钜同创：跨境电商运营如何优化Listing文案
对于跨境电商运营而言,如何编辑好产品的listing,提高产品的曝光和排名十分重要,只有不断的完善产品listing,才会有更多的流量汇集.那么,跨境电商的运营人员应该如何优化listing文案呢? ...
廊坊金彩教育：电商店铺运营优化的方法
作为电商平台的商家,想要自己的店铺能做的更远,那么一定要具备相关的网店运营的相关知识基础,这样才能带动店铺更好的发展. 很多商家认为,店铺产品越多越丰富,带来的转化率就越大.实际上不是这样.如果店铺产 ...
基于SSM水果蔬菜商城批发网站|电商购物系统
<SSM水果蔬菜商城批发网站>该项目采用的技术实现如下:HTML+CSS+JavaScript+jsp+Spring+SpringMVC+Mybatis+Mysql数据库+Tomcat服务 ...
计算机毕业论文选题SSM水果蔬菜商城批发网站|电商购物系统[包运行成功]

图片数量较多的网站（电商）该如何优化

图片数量较多的网站（电商）该如何优化相关推荐

最新文章

热门文章