一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化 这些图片的加载,给用户更好的体验

图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端 的距离与页面的距离,如果前者小于后者,优先加载。

如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先 下载。

如果图片为 css 图片,可以使用 CSSsprite,SVGsprite,Iconfont、Base64 等技术。 如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图, 以提高用户体验。

如果图片展示区域小于图片的真实大小,则因在服务器端根据业务需要先行进行图片压缩, 图片压缩后大小与展示一致。

时间: 2024-08-27 19:05:37

一个页面上有大量的图片(大型电商网站),加载很慢,你有哪些方法优化 这些图片的加载,给用户更好的体验的相关文章

像淘宝、京东这样的大型电商网站服务器构架完全部署方案

任何一个大型网站都是经历用户积累然后成长,从一台服务器到多台服务器才能构架支撑网站现有数据.用户.页面请求等.大型网站(如淘宝.京东等)的系统架构并不是开始设计就具备完整的高性能.高可用.安全等特性,它总是随着用户量的增加,业务功能的扩展逐渐演变完善的,在这个过程中,开发模式.技术架构.设计思想也发生了很大的变化,就连技术人员也从几个人发展到一个部门甚至一条产品线.所以成熟的系统架构是随业务扩展而完善出来的,并不是一蹴而就;不同业务特征的系统,会有各自的侧重点,例如淘宝,要解决海量的商品信息的搜

电商总结(八)如何打造一个小而精的电商网站架构

前面写过一些电商网站相关的文章,这几天有时间,就把之前写得网站架构相关的文章,总结整理一下.把以前的一些内容就连贯起来,这样也能系统的知道,一个最小的电商平台是怎么一步步搭建起来的.对以前的文章感兴趣的朋友可以看这个,http://www.cnblogs.com/zhangweizhong/category/879056.html 本文大纲: 1. 小型电商网站的架构 2. 日志与监控系统的解决方案 3. 构建数据库的主从架构 4. 基于共享存储的图片服务器架构 5. 移动M站建设 6. 系统容

大型网站架构系列:电商网站架构案例分析

上节课我们小组对淘宝网进行了简要的架构分析,这周我在课余时间对这类大型电商网站的某些具体架构技术进行了梳理和概括,并对一些架构方法进行更深层次的介绍,并且结合软件工程进行典型电商的需求分析. 一.典型电商案例 电商网站:比如阿里巴巴,京东商城,国美在线,汽车之家等.大型门户一般是新闻类信息,可以使用CDN,静态化等方式优化,一些交互性比较多的网站,可能会引入更多的NOSQL,分布式缓存,使用高性能的通信框架等.电商网站具备以上两类的特点,比如产品详情可以采用CDN,静态化,交互性高的需要采用NO

如何打造一个小而精的电商网站架构?

本文大纲: 1. 小型电商网站的架构 2. 日志与监控系统的解决方案 3. 构建数据库的主从架构 4. 基于共享存储的图片服务器架构 5. 移动M站建设 6. 系统容量预估 7. 缓存系统 一.小型电商网站的架构 刚从传统软件行业进入到电商企业时,觉得电商网站没有什么技术含量,也没有什么门槛,都是一些现有的东西堆积木似的堆出来罢了.然而,真正进入到这个行业之后,才发现并非如此.有人说过,好的架构,是演化出来的,电商网站的架构也是如此.现在好的电商网站,看似很复杂,很牛逼,其实也是从很小的架构,也

利用PHP获取一个页面上的链接信息

开发中我们可能会获取某个页面或是一段内容中的链接信息,下面我分享一个我写的函数给大家,希望能帮到大家. 函数功能: 1.获取一段内容中链接信息: 2.获取一个URL中链接信息: 3.剔除锚链等无效的链接 4.获取当前域下的链接信息 5.获取他域下的链接信息 6.保留链接的文本信息 代码: /** * +---------------------------------------------------------- * 功能:获取一个网页或一段内容里面的链接信息 * +------------

android一个页面上多个listview

android一个页面上多个listview,在滚动的时候,需要两个listview能够一起滚动,看起来是一个view. 这个功能的具体实现,参考: http://blog.csdn.net/xia296/article/details/8128674 最主要的代码是: /** * 设置listview高度,注意listview子项必须为LinearLayout才能调用该方法 * @param listview listview * */ public static void setListVi

页面上水平飞舞的图片

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>页面上水平飞舞的图片丨石家庄展柜厂|石家庄活动隔断</title> </head> <body onload="next();"> <script language="J

大型网站架构系列:电商网站架构案例

大型网站架构是一个系列文档,欢迎大家关注.本次分享主题:电商网站架构案例.从电商网站的需求,到单机架构,逐步演变为常用的,可供参考的分布式架构的原型.除具备功能需求外,还具备一定的高性能,高可用,可伸缩,可扩展等非功能质量需求(架构目标). 根据实际需要,进行改造,扩展,支持千万PV,是没问题的. 本次分享大纲 电商案例的原因 电商网站需求 网站初级架构 系统容量估算 网站架构分析 网站架构优化 架构总结 电商网站案例,一共有三篇本篇主要说明网站的需求,网站初始架构,系统容量估算方法. 一.电商

柯南君:教你如何对待大型电商平台的性能优化?之 一 (方法、指标、工具、定位)

柯南君:教你如何对待大型电商平台的性能优化?之 一 (方法.指标.工具.定位) 柯南君的朋友"闲哥"最近遇到了点困扰---"大型网站平台如何对待性能优化,以及如何针对性调优?",柯南君今天,想谈一下性能优化的战略,主要是一些企业架构级别的技术和方法.柯南君将自己的个人经验和各家公司大咖的经验一起汇总给大家,如有瑕疵,请大家及时指正. 柯南君有句自律的口头语"如果你不能成为一个追求性能的疯子,那么性能将会把你变成疯子"        序曲: 如何评