优化图片加载的方法

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

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

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

4、如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验。

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

如果是css图片,以下为主要技术的介绍:

CSS Sprites  其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

优点

1.利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

2.CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

缺点

诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:

1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;

2.CSS Sprites在开发的时候比较麻烦,你要通过PHOTOSHOP或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!

3.CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

4.CSS Sprites非常值得学习和应用,特别是页面有一堆icon(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。

SVGsprite   避开使用位图制作Sprite,来适应所有屏幕的显示。而这种技术就是SVG的Sprite来替代早期的位图Sprite。缩放不会失真

Iconfont   图标字体

时间: 2024-08-19 15:28:47

优化图片加载的方法的相关文章

切图崽的自我修养-优化图片加载流程

前言 优化! 又是优化! 切图崽们作为整个web应用的纽带,连接着用户行为和机器性能. 而优化的最终意义,在于在这两者之间取得一个最佳的平衡点. 对于图片资源的加载来说,更是如此. 今天我们就来简单说说,项目开发中常见的图片加载优化方式. 预加载 1.遮罩大法 我们经常用jquery, jquery中$(function){})实际上是DOMContentLoaded事件完成的回调,只是完成了DOM树的构建. 诸如Css的渲染以及页面内图片等资源的下载不一定完成了.所以如果此时呈现页面,页面会非

如何优化图片加载慢

1.压缩图片 2.懒加载(页面上图片多,但用户并不是要求立即就能看到全部图片,可以当用户将要看到的时候,再去加载,先加载用户看的,让出网络带宽) 3.对页面进行分帧Frame加载,比如页面很长,可以只加载前面一部分重要的HTML,当用户拉下来的时候,再加载下面的,塞进去. 4.使用BigPipe技术 5.JS进行异步加载 思路:1.对于用户关注的重要内容优先加载(比如视频网站的播放器),用户不怎么关注的内容(比如广告,推荐侧栏)懒加载. 2.减少http请求,合并js,css,image文件 3

IOS 开发笔记-基础 UI(7)汤姆猫(UIImageView 的序列帧动画、图片加载,方法重构、Bundle 图片素材)

使用UIImageView.UIButton实现一个综合小案例---汤姆猫 回忆:UIImageView 来自UIView,UIView 来自UIResponder,UIButton 来自UIControl,UIControl 来自UIView 单独看实现,代码实现其实比较简单,但是创意很难得,美工要求很高! 是一个了不起的游戏! 功能分析 (1)点击对应的按钮后,让汤姆猫展现对应的动画 步骤分析 (1)搭建UI界面,同时也是准备素材 (2)监听按钮点击 (3)根据点击的按钮执行对应的动画 说明

图片加载时间缓慢问题API

一.背景       最近段时间,开发写值工具项目中,出现图片加载问题API,响应时间缓慢:为了优化图片加载问题,我进行图片压缩方法,然后API的图片加载还是慢,最终在自己无意中乱写找到了根本的原因. 二.问题     优化图片加载问题 三.原因  1. 在API中,图片转换byte[ ]方法,用BMP的格式图片导致的API图片加载很慢: returnImage.Save(mstream2, System.Drawing.Imaging.ImageFormat.Bmp); 2. BMP 不支持压

vue开发之图片加载不出来问题解决

在使用vue开发项目的时候,经常会遇到的一个问题就是:图片加载不出来.下面是我总结的几种图片加载不出来的情况及解决办法. 一.项目打包完成后,打开整体空白 1.路径问题 原因 在vue+webpack的项目中,项目打包之后的css和js的引用路径是绝对路径,项目部署之后会将静态当成根目录,就造成了文件引用路径的错误. 解决办法 通过修改配置文件,将绝对路径改为相对路径. 具体操作如下: 1.vue-cli 3.0版本之前 配置config下面的index.js中bulid模块导出的路径.因为in

iOS开发>学无止境 - 异步图片加载优化与常用开源库分析

作者:罗轩(@luoyibu) 网址:http://www.jianshu.com/p/3b2c95e1404f 1. 网络图片显示大体步骤:   下载图片 图片处理(裁剪,边框等) 写入磁盘 从磁盘读取数据到内核缓冲区 从内核缓冲区复制到用户空间(内存级别拷贝) 解压缩为位图(耗cpu较高) 如果位图数据不是字节对齐的,CoreAnimation会copy一份位图数据并进行字节对齐 CoreAnimation渲染解压缩过的位图 以上4,5,6,7,8步是在UIImageView的setImag

Android_优化查询加载大数量的本地相册图片

一.概述 讲解优化查询相册图片之前,我们先来看下PM提出的需求,PM的需求很简单,就是要做一个类似微信的本地相册图片查询控件,主要包含两个两部分: 进入图片选择页面就要显示出手机中所有的照片,包括系统相册图片和其他目录下的所有图片,并按照时间倒叙排列 切换相册功能,切换相册页面列出手机中所有的图片目录列表,并且显示出每个目录下所有的图片个数以及封面图片 这两个需求看似简单,实则隐藏着一系列的性能优化问题.在做优化之前,我们调研了一些其他比较出名的app在加载大数量图片的性能表现(gif录制的不够

Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)

列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath)中给单元格设置图片. 但有时这些图片要从远程加载,或者要给图片作裁减,添加滤镜等操作.如果这些操作还是直接在主线程中进行,由于上下拖动表格滚动条的时候,单元格渲染是实时进行的.那么单元格便会不断地进行图片加载,渲染,影响效率造成卡顿.如果图片大的话还会浪费流量. 下面通过一个展示“热

利用ViewPager实现3D画廊效果及其图片加载优化

前言 对于ViewPager,相信大家都已经很熟悉了,在各种切换场景比如Fragment切换.选项卡的切换或者顶部轮播图片等都可以用ViewPager去实现.那么本篇文章带来ViewPager的一种实现效果:3D画廊.直接上图来看: 从上面的图我们可以看出,整个页面分成三个部分,中间的是大图,正中地显示给用户:而两边的是侧图,而这两幅图片又有着角度的旋转,与大图看起来不在同一平面上,这就形成了3D效果.接着拖动页面,侧面的图慢慢移到中间,这个过程也是有着动画的,包括了图片的旋转.缩放和平移.在欣