就像用FIREFOX搜索GOOGLE图片,鼠标放上去后,图片略缩图放大,然后逐渐清晰。
18 个解决方案
#1
图片预加载
#2
先加载小分辨率的图片,这样加载速度会很快
放大到跟大图片一样大,这样浏览器显示小分辨率的图片当然就比较模糊
然后加载大图片。大图片的大小、位置跟小图片是一样的,而且是覆盖在小图片上方。
所以当大图片加载过程中,效果就是模糊图片变清晰了。
实际上是清晰的大图挡住了小图
放大到跟大图片一样大,这样浏览器显示小分辨率的图片当然就比较模糊
然后加载大图片。大图片的大小、位置跟小图片是一样的,而且是覆盖在小图片上方。
所以当大图片加载过程中,效果就是模糊图片变清晰了。
实际上是清晰的大图挡住了小图
#3
楼上的,还记得JPEG本身就支持这种效果吗?
唉。。。。
唉。。。。
#4
是这个道理
#5
现在是WEB,网页,不是那个什么ACDSEE之类的东西
#6
这样能实现渐渐清晰的效果??好象不是吧!大图片完毕就直接显示了!小图片拉大也是越来越模糊怎么会越来越清晰呢?
我觉得应该增加其他效果!图片预加载,LAZYLOAD应该包括了这种效果!或者其他什么插件!
#7
楼上几位说的是 “图片预加载”,有没有示例代码吗?
我只知道LAZYLOAD技术……
我只知道LAZYLOAD技术……
#8
google的是2张图片,后一张预加载覆盖原图的
#9
这样的JS代码怎么写呢?有没有教程?谢谢。
#10
嗯 嗯 嗯 嗯
#11
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
lowsrc预加载低分辨率图片
lowsrc预加载低分辨率图片
#12
<script type="text/javascript" src="JS/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#DivImage").fadeIn(600);
});
</script>
<div id="DivImage" style="display:none">
<img src="Images/find_whereimg.png" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#DivImage").fadeIn(600);
});
</script>
<div id="DivImage" style="display:none">
<img src="Images/find_whereimg.png" />
</div>
#13
这种图片应该是用JPEG2000编码的吧,好像是什么小波变换分层编码的,预先加载的是低频信息,然后再是高频信息,高频在低频的基础上算出来的。
#14
lowsrc 这个兼容所有浏览器吗 ,没试过
#15
#16
哦~~又有新的答案出现了。
12楼,fadeIn的确可以替换替换照片,但如果有大量的图片加载处理时,有点不显示。尤其像GOOGLE那种,图片名字是随机的……
13楼,这个不是很清楚,查查资料去……
12楼,fadeIn的确可以替换替换照片,但如果有大量的图片加载处理时,有点不显示。尤其像GOOGLE那种,图片名字是随机的……
13楼,这个不是很清楚,查查资料去……
#17
①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持*别的压缩,不过,这种压缩是有损耗的。此类型图片在网页下载时只能由上而下依序显示图片,直到图片资料全部下载完毕,才能看到全貌。
②渐进式JPEG:渐进式JPG为标准JPG的改良格式,支持交错,可以在网页下载时,先呈现出图片的粗略外观后,再慢慢地呈现出完整的内容,渐进式JPG的文件比标准JPG的文件要来得小。
③JPEG2000:新一代的影像压缩法,压缩品质更好,其压缩率比标准JPEG高约30%左右,同时支持有损和无损压缩。一个极其重要的特征在于它能实现渐进传输,即先传输图像的轮廓,然后逐步传输数据,让图像由朦胧到清晰显示。
②渐进式JPEG:渐进式JPG为标准JPG的改良格式,支持交错,可以在网页下载时,先呈现出图片的粗略外观后,再慢慢地呈现出完整的内容,渐进式JPG的文件比标准JPG的文件要来得小。
③JPEG2000:新一代的影像压缩法,压缩品质更好,其压缩率比标准JPEG高约30%左右,同时支持有损和无损压缩。一个极其重要的特征在于它能实现渐进传输,即先传输图像的轮廓,然后逐步传输数据,让图像由朦胧到清晰显示。
#18
@bird_3333,上述2,3两种图片,是用什么软件转换的呢?能否进一步授教,谢谢。
#1
图片预加载
#2
先加载小分辨率的图片,这样加载速度会很快
放大到跟大图片一样大,这样浏览器显示小分辨率的图片当然就比较模糊
然后加载大图片。大图片的大小、位置跟小图片是一样的,而且是覆盖在小图片上方。
所以当大图片加载过程中,效果就是模糊图片变清晰了。
实际上是清晰的大图挡住了小图
放大到跟大图片一样大,这样浏览器显示小分辨率的图片当然就比较模糊
然后加载大图片。大图片的大小、位置跟小图片是一样的,而且是覆盖在小图片上方。
所以当大图片加载过程中,效果就是模糊图片变清晰了。
实际上是清晰的大图挡住了小图
#3
楼上的,还记得JPEG本身就支持这种效果吗?
唉。。。。
唉。。。。
#4
是这个道理
#5
现在是WEB,网页,不是那个什么ACDSEE之类的东西
#6
这样能实现渐渐清晰的效果??好象不是吧!大图片完毕就直接显示了!小图片拉大也是越来越模糊怎么会越来越清晰呢?
我觉得应该增加其他效果!图片预加载,LAZYLOAD应该包括了这种效果!或者其他什么插件!
#7
楼上几位说的是 “图片预加载”,有没有示例代码吗?
我只知道LAZYLOAD技术……
我只知道LAZYLOAD技术……
#8
google的是2张图片,后一张预加载覆盖原图的
#9
这样的JS代码怎么写呢?有没有教程?谢谢。
#10
嗯 嗯 嗯 嗯
#11
<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">
lowsrc预加载低分辨率图片
lowsrc预加载低分辨率图片
#12
<script type="text/javascript" src="JS/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#DivImage").fadeIn(600);
});
</script>
<div id="DivImage" style="display:none">
<img src="Images/find_whereimg.png" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#DivImage").fadeIn(600);
});
</script>
<div id="DivImage" style="display:none">
<img src="Images/find_whereimg.png" />
</div>
#13
这种图片应该是用JPEG2000编码的吧,好像是什么小波变换分层编码的,预先加载的是低频信息,然后再是高频信息,高频在低频的基础上算出来的。
#14
lowsrc 这个兼容所有浏览器吗 ,没试过
#15
#16
哦~~又有新的答案出现了。
12楼,fadeIn的确可以替换替换照片,但如果有大量的图片加载处理时,有点不显示。尤其像GOOGLE那种,图片名字是随机的……
13楼,这个不是很清楚,查查资料去……
12楼,fadeIn的确可以替换替换照片,但如果有大量的图片加载处理时,有点不显示。尤其像GOOGLE那种,图片名字是随机的……
13楼,这个不是很清楚,查查资料去……
#17
①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持*别的压缩,不过,这种压缩是有损耗的。此类型图片在网页下载时只能由上而下依序显示图片,直到图片资料全部下载完毕,才能看到全貌。
②渐进式JPEG:渐进式JPG为标准JPG的改良格式,支持交错,可以在网页下载时,先呈现出图片的粗略外观后,再慢慢地呈现出完整的内容,渐进式JPG的文件比标准JPG的文件要来得小。
③JPEG2000:新一代的影像压缩法,压缩品质更好,其压缩率比标准JPEG高约30%左右,同时支持有损和无损压缩。一个极其重要的特征在于它能实现渐进传输,即先传输图像的轮廓,然后逐步传输数据,让图像由朦胧到清晰显示。
②渐进式JPEG:渐进式JPG为标准JPG的改良格式,支持交错,可以在网页下载时,先呈现出图片的粗略外观后,再慢慢地呈现出完整的内容,渐进式JPG的文件比标准JPG的文件要来得小。
③JPEG2000:新一代的影像压缩法,压缩品质更好,其压缩率比标准JPEG高约30%左右,同时支持有损和无损压缩。一个极其重要的特征在于它能实现渐进传输,即先传输图像的轮廓,然后逐步传输数据,让图像由朦胧到清晰显示。
#18
@bird_3333,上述2,3两种图片,是用什么软件转换的呢?能否进一步授教,谢谢。