网站如何解决图片过大加载慢的问题?
来源:互联网 发布:域名备案过怎么注销 编辑:程序博客网 时间:2024/05/22 08:30
看看这些人的想法能不能帮上你:
甲:
1,不太“在乎”用户体验的省事方法:
图片保存成渐进式的,加载会慢慢变清晰,而不是从上往下依次加载,然后放在 CDN,设置缓存之类。
2,比较“在乎”用户体验的高端方案:
判断用户的设备(主要用在移动端)、网络等,分别加载不同质量的图片(例如高端 iPhone wifi 情况下,就可以加载双倍高清图等,蜂窝网络下面,就加载个单倍或者有损压缩过的)。
或者先加载低质量的图片,让浏览者可以看到,然后再在后台加载更高清的,等加载完了,浏览者还在观看,就插入替换掉。或者先加载低质量小图片列表,然后让用户点击,触发类似 fancybox 的效果,弹窗出现大图片。或者利用资源预加载(三个 HTML5 不常见特性简介)当用户还没打开的时候,就开始加载。还有好多思路,后面想到再补充。
乙:
压缩,预加载,缓存,图床。
丙:
1.使用缓存
2.使用CDN加速3.使用jq延迟加载图片, 用到那个 加载哪个.
4.加大服务器宽带
5.检查服务器硬盘读取速度.
丁:
要尽可能的压缩,看用户的忍受程度。jpg 可以用很多方法压缩,png 推荐使用 工具(不过正文图片,显然要选择 jpg 格式的)。
推荐个压缩图片的神器:
https://tinypng.com/ 如图所示:
不过缺点就是不能设置压缩比例。只能直接压缩至最小。作为大banner图的有时候清晰度就不够达标。
戊:
直接一开始用压缩过的体积小的图,等加载完毕后,再用高清无码图来替换掉
高清无码的图片随便怎么命名,但是压缩过的命名有要求,那就是必须在原图的名称前面加上相同的便于分辨的标识。比如
高清图1命名为wozuishuai.jpg 那么相应的压缩图就叫wozuishuai_min.jpg (_min这个随你取名,但是要一致,不能一个叫_min,下一个就成了_small)
然后,高清图在网页上都不用,用压缩过的图。比如这样子
不用怕,可以用下面这段代码来解决这个问题,这个是基于jq的,要先引入jq
<script>$(function(){//一段正则,匹配所有_min.的图片src属性var test = /_min\.///遍历所有的图片节点$("img").each(function(index,obj){if(test.test($(this).attr("src"))){var reSrc = $(this).attr("src").replace(test,".");$(this).attr("src",reSrc)}})})</script>
最后我们用一张图来测试下这个方法的可行性
- 网站如何解决图片过大加载慢的问题?
- 网站如何解决图片过大加载慢的问题?
- Android异步加载图片,解决图片过大OOM问题
- 解决jsp 文件加载过大的问题
- Android---加载图片 解决图片过大导致的内存溢出问题
- Android 图片加载导致内存占用过大的问题
- 延迟加载解决offset过大导致的分页性能问题
- ImageLoader加载图片慢的问题
- 解决phonegap初始加载慢的问题
- 解决wordpress页面加载慢的问题
- 解决WordPress网站加载慢和头像不显示问题
- 解决Android获取网络图片过大的问题
- iOS图片占内存过大的问题完美解决
- 解决Android自定义CheckBox图片过大的问题
- webview加载html图片过大左右滑动的解决/webview加载图片自适应大小
- webview加载html图片过大左右滑动的解决/webview加载图片自适应大小
- DB2问题诊断与解决: 一个由于历史文件过大,导致LOAD慢的问题
- Android 图片加载,内存过大问题
- SQLSERVER2008-数据库可疑的解决步骤
- HDU1106 排序
- Android 通过接口传值
- mysql5.7.18解压版启动mysql服务
- phpstudy安装64位PHP
- 网站如何解决图片过大加载慢的问题?
- URI、 URL 和 URN 的区别
- Nginx相关配置
- mybatis配置oracle批量插入
- PHP 学习
- R语言- 批量导入excel的xlsx格式数据文件
- 数据库——(15)触发器
- cdh5版本中的oozie hive action使用及踩坑集锦
- Scala学习—隐式转换与隐式参数