让页面图片逐渐清晰直至加载完毕

图片由模糊逐渐转为清晰的效果是通过photoshop保存png图片时,在对话框中选中Interlaced(交错的)按钮,那么在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰的效果方式渐渐显示出来。这种效果在一些网站上是比较常看到的,之前我以为是通过JS或者css来完成的。

下面扫盲一下各种文件格式吧。

PNG格式是由Netscape公司开发出来的格式,可以用于网络图像,但它不同于GIF格式图像只能保存256色,PNG格式可以保存24位的真彩色图像,并且支持透明背景和消除锯齿边缘的功能,可以在不失真的情况下压缩保存图像。

但由于PNG格式不完全支持所有浏览器,所以在网页使用要比GIF和JPEG格式使用少的多。但相信随着网络的发展和因特网传输的改善,PNG格式将是未来网页中使用的一种标准图像格式。
PNG 格式文件在RGB个灰度模式下支持Alpha通道,但是索引颜色个位图模式下不支持Alpha通道。在保存PNG格式的图像时,会弹出对话框,如果在对话框中选中Interlaced(交错的)按钮,那么在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰的效果方式渐渐显示出来。

交错是一种通过 Internet 发送图片数据的方法。当某个图片交错时,会发生以下情况:在下载了该图片的 1/64 后,您可以看到图片外观形状的总体图像

就是指浏览器下载它的时候隔行下载,这样下载一张图只用一半的时间就可以看到它的样子,只不过只是隔行的图,然后它再下载另一般,这样可以减少你等待看它的时间.
在存GIF和JPG时也有这个优化.(fireworks中)

bmp:windows系统下的标准位图格式,使用广泛。其结构非常简单,未经过任何压缩,所以图像文件会比较大。但它可以被大多数软件“无条件接受”,可称为通用格式。例如windows墙纸就是用了这样的格式!

jpeg:是应用最广泛的图片格式之一,它采用一种比较特殊的有损压缩算法,将不易被人眼察觉的图像颜色删除(这点和mp3音乐格式去掉了人类听觉范围外的声音是相通的),从而达到较大的压缩比(可达到2:1甚至40:1),所以“小巧玲珑”,在网络上运用广泛!

gif:分为静态gif和动画gif两种,支持透明背景图像,适用于多种操作系统,“体型”很小,网上很多小动画都是gif格式。其实gif是将多幅图像保存为一个图像文件,从而形成动画,所以归根到底gif仍然是图片文件格式。

以上三种是最常见的格式,以下5种虽然运用没有那么广泛但也有其优点!

cdr:世界著名的图形设计软件——coreldraw的专用格式,属于矢量图像,最大的优点“体积”不大,便于再处理。

dxf:三维模型设计软件的巨头——autocad的专用格式,文件小,所绘制的图形尺寸、角度等数据十分准确,是建筑设计的首选。该格式和软件一样已经渐渐成为了三维模型设计业内的标准了。

psd:图像处理软件中的绝对霸主photoshop的图像专用格式,图像文件一般较大。
pcx:zsoft公司在开发图像处理软件paintbrush时开发的一种格式,存储格式从1位到24位。它是经过压缩的格式,占用磁盘空间较少,并具有压缩及全彩色的优点。

先来说一下交错:

交错:Interlace

就是指浏览器下载它的时候隔行下载,这样下载一张图只用一半的时间就可以看到它的样子,只不过只是隔行的图,然后它再下载另一般,这样可以减少你等待看它的时间.
在存GIF和JPG时也有这个优化.(fireworks中) ______http://zhidao.baidu.com/question/5269019.html

网经:

交错技术

有很多用户上网的速度很慢,有时候显示一张图片时,等很久都不能显示图,如果,没用交错技术的话。那么用户要等图全下载完了才能看见。有交错技术那么图可以一部分一部分的显示出来。让用户可以提前知道内容。

图像隔行扫描:电视是隔行扫描,而电脑屏幕是逐行扫描,De-Interlace(隔行扫描)就是用来模拟电视屏幕的显示方式的。包括隔行GIF和逐级JPG方式。

1,交错图:如果图像是一幅交错图,则它在页面上逐步出现的时候,会以类似百叶窗的效果显示。

注意:一般默认情况下,图是以50%为单位显示。

PNG图像和GIF图像都支持这种交错格式。

隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在 Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non Interlaced”)。

2,渐进图:如果图像是一幅渐进图,则它在页面上逐步出现的时候,会首先显示较模糊的整幅图像,然后逐渐变得清晰。这样,浏览者可以在下载过程中尽早了解图像的大致轮廓。

JPG/JPEG图像支持这种渐进格式。

逐级JPG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来,虽然图像不很完美,但是却让浏览者看到了希望,并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。

www.libpng.org/pub/png/pngintro.html

时间: 2024-05-14 01:31:30

让页面图片逐渐清晰直至加载完毕的相关文章

求助!求助!网站页面图片太多,加载时间太长该怎么办?

以下是百度统计的诊断,小弟万般无奈,html上的缓存以及图片处理技巧欠缺,希望各位大大帮帮忙支个招! 以下元素可在不损失原信息量的前提下进行压缩: http://www.5atl.com/Style/main.css (大小: 11.4 KB 预计可减少 796 B ) http://www.5atl.com/Script/jquery.js (大小: 23.5 KB 预计可减少 171 B ) http://www.5atl.com/data/attachment/common/d9/comm

大坑啊!!!关于页面加载完毕事件!!!

这个坑导致我页面加载完毕后获取元素高度有问题,获取不正确或者是很小才20px,元素本身高度几百,困扰了我这个新手几天.原因就是js原生的onload事件和jq的ready事件的区别. 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 

基于用户行为的图片等资源预加载

一.图片的懒加载和预加载 懒加载和本文要提到的预加载实际是不同的概念. 典型的懒加载,例如本博文章的图片,当用户滚动图片进入窗体的时候,才去加载:或者用户点击选项卡,原本隐藏的图片此时再去加载,这个也称之为懒加载. 而预加载则是,用户还没有行为发生,资源已经加载完毕,从这一定义来讲,我们传统图片啪啪啪全部加载完毕,本质上也是预加载,好处就在于,体验好啊,没有泛白或者菊花的出现.不足也很明显,那就是资源可能白白加载了,尤其视频之类的,小明打开bilibili就是来围观广告的,结果,百兆视频巴拉拉魔

两种方法实现在HTML页面加载完毕后运行某个js

两种方法实现在HTML页面加载完毕后运行某个js 这篇文章主要介绍了通过两种方法实现在HTML页面加载完毕后运行某个js,需要的朋友可以参考下 js方法: 复制代码 代码如下: <script type="text/javascript"> window.onload=function(){ var userName="xiaoming"; alert(userName); } </script> 以下为jQuery方法,需要引用jQuery

页面滚动图片等元素动态加载插件jquery.scrollLoading.js

如果一个网页很长,那么该页面的加载时间也会相应的较长.而这里给大家介绍的这个jQuery插件scrollLoading的作用则是,对页面元素进行动态加载,通俗的说就是滚到哪就加载到哪,屏幕以下看不见的就不用加载了.这样还可以在一定程度上节省服务器资源.该插件作者的网页将该插件的功能和使用方法描述的非常详细,这里把最一般最普遍的使用情况给大家展现一下. 插件作者:http://www.zhangxinxu.com/ 首先我们需要加载jQuery库和本插件js文件. (jquery.scrollLo

jQuery页面滚动图片等元素动态加载实现

一.关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多.比如说光棍节很疯狂的淘宝商城页面. 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类. 这些页面图片数量多,而且比较大,少说百来K,多则上兆.要是页面载入就一次性加载完毕.乖乖,估计黄花都变成黄花菜了.所以,我们得做点什么,避 免这种糟糕的状况发生.目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的,随着页面的滚动,这个要显示图片的区域进入了浏览器可是窗 口范围,则触发图片的加载显示.

页面全部加载完毕和页面dom树加载完毕

dom树加载完毕 $(document).ready() //原生写法document.ready = function (callback) {            ///兼容FF,Google            if (document.addEventListener) {                document.addEventListener('DOMContentLoaded', function () {                    document.rem

JS实现页面加载完毕之前loading提示效果

1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; 2.计算loading框距离顶部和左部的距离(loading框的宽度为215px,高度为61px) var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLe

Android:ViewPager扩展详解——带有导航的ViewPagerIndicator(附带图片缓存,异步加载图片)

大家都用过viewpager了, github上有对viewpager进行扩展,导航风格更加丰富,这个开源项目是ViewPagerIndicator,很好用,但是例子比较简单,实际用起来要进行很多扩展,比如在fragment里进行图片缓存和图片异步加载. 下面是ViewPagerIndicator源码运行后的效果,大家也都看过了,我多此一举截几张图: 下载源码请点击这里 ===========================================华丽的分割线==============