打印

img标签，先出来一张比较模糊的图片，然后变清晰？

mugong [楼主]

初级会员

帖子: 73
体力: 164
威望: 0
当前: 北京朝阳区

1^# 大中小发表于 2008-5-7 10:05

以前记得有，现在给忘了，google出这个没有答案的帖子。

“html怎么实现图片预载？？
我的图片太大，在TAOBAO网显示有点慢，我想先出来一张比较模糊的图片，然后变清晰，免得看的人失去兴趣。
能跟我说下实现这种效果的代码怎么写吗？？？”

牧工制造

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

10dw

小盆友

高级会员

帖子: 469
体力: 911
威望: 0
当前: 美洲美国
离线: 2 天

专长 网页设计,JS,PHP

2^# 大中小发表于 2008-5-7 10:28

存时选interleaving

TOP

美橙vps独立IP月付189元

mugong [楼主]

初级会员

帖子: 73
体力: 164
威望: 0
当前: 北京朝阳区

3^# 大中小发表于 2008-5-7 10:51

类似baidu相册的那

牧工制造

TOP

请大家尊重和保护奥运知识产权。

jdx126

新手上路

帖子: 7
体力: 19
威望: 0

4^# 大中小发表于 2008-6-3 15:32

提示：您可以先修改部分代码再运行

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

nahom

初级会员

帖子: 53
体力: 54
威望: 0
离线: 21 天

5^# 大中小发表于 2008-6-3 17:12

引用:

原帖由 jdx126 于 2008-6-3 15:32 发表
[html]

New Document





   body {font: bold 12pt arial}
   div {font: bold 12pt arial}
   div.box {width: 175px; height: 175px; padding: 20px;
         font: bold 28pt arial ...

这样都行,N

博客www.gaoso.com.cn

TOP

ONEBOYS

中级会员

帖子: 189
体力: 379
威望: 0
当前: 浙江杭州

6^# 大中小发表于 2008-6-3 19:25

汗，四楼的那是什么东西啊。。。

。。。。
img有一个参数：lowsrc

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

7^# 大中小发表于 2008-6-3 19:28

应该都是和滤镜有关的技术，估计FF下没效

我爱阿仙奴！

TOP

zhulinsen163

新手上路

帖子: 1
体力: 7
威望: 0
当前: 江苏无锡
离线: 125 天

8^# 大中小发表于 2008-6-3 19:57

小菜鸟来学习了

TOP

CNwander

浩波

中级会员

帖子: 405
体力: 273
威望: 1
当前: 北京海淀区
离线: 2 天

专长 UI,JS,UE

9^# 大中小发表于 2008-6-4 06:55

在保存图片的时候设置row order 为 interlaced就是.

你的丑与你的脸无关

TOP

jdx126

新手上路

帖子: 7
体力: 19
威望: 0

10^# 大中小发表于 2008-6-5 10:30

楼上说得对

直接用img 的lowsrc属性就可以了

TOP

wolong

帅绝人寰

银牌会员

帖子: 2046
体力: 1288
威望: 0
当前: 贵州黔南

专长 PHP,MySQL

11^# 大中小发表于 2008-6-5 15:29

引用:

原帖由 ONEBOYS 于 2008-6-3 19:25 发表
汗，四楼的那是什么东西啊。。。

。。。。
img有一个参数：lowsrc

具体怎么用？
<img src="清晰的图片url" lowsrc="模糊的图片URL" />
这样吗？

英雄不会读诗书

TOP

sundoo

初级会员

帖子: 46
体力: 102
威望: 0
当前: 广东深圳
离线: 18 天

12^# 大中小发表于 2008-6-5 16:03

在FF下无效，可惜了

TOP

kl19872

花会开

中级会员

帖子: 158
体力: 323
威望: 0
当前: 山东荷泽

13^# 大中小发表于 2008-6-5 19:34

回复 wolong 在 11# 的帖子

是这样的
低解析度图形 <IMG SRC="URL" LOWSRC="URL">

TOP

mugong [楼主]

初级会员

帖子: 73
体力: 164
威望: 0
当前: 北京朝阳区

14^# 大中小发表于 2008-6-6 17:39

看百度相册里没有使用LOWSRC啊

牧工制造

TOP

mugong [楼主]

初级会员

帖子: 73
体力: 164
威望: 0
当前: 北京朝阳区

15^# 大中小发表于 2008-7-3 15:05

百度那有缩略图，原理可能是这样。

<html>
<head>
<style>
a img{border:0;vertical-align:bottom;}
#imgnav{width:308px;border:1px solid #999;position:relative;}
#imgnav a{position:absolute;top:0;left:0;z-index:999;}
#imgnav img{width:300px;vertical-align:bottom;}
table img{width:100px;cursor:pointer;}
</style>
<script>
function picload(str){
var a=document.getElementById("imgnav").getElementsByTagName("a")[0];
var d1=document.getElementById("imgnav").getElementsByTagName("img")[0];
var d2=document.getElementById("imgnav").getElementsByTagName("img")[1];
d1.src=str;
a.href=str.replace("abpic","pic");
d2.src=str.replace("abpic","pic");
}
</script>
</head>
<body>
<div id="imgnav">
<img src="http://home.goofar.com/mu495/abpic/b4a8f7455a9d4b34879473a8.jpg" /><a href="http://home.goofar.com/mu495/pic/b4a8f7455a9d4b34879473a8.jpg" title=""><img src="http://home.goofar.com/mu495/pic/b4a8f7455a9d4b34879473a8.jpg" /></a>
</div>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img onclick="picload(this.src);" src="http://home.goofar.com/mu495/abpic/b4a8f7455a9d4b34879473a8.jpg" /></td>
<td><img onclick="picload(this.src);" src="http://home.goofar.com/mu495/abpic/9dc9e035db4a401a91ef392a.jpg" /></td>
<td><img onclick="picload(this.src);" src="http://home.goofar.com/mu495/abpic/d924c5ecede7f936269791b1.jpg" /></td>
</tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

牧工制造

TOP

xling

艾克司令

版主

帖子: 2919
体力: 5193
威望: 90
当前: 广东深圳

专长 JS,PHP,Oracle

16^# 大中小发表于 2008-7-3 16:18

引用:

原帖由 10dw 于 2008-5-7 10:28 发表
存时选interleaving

这个说的以经很清楚了!
用PS存的时候,选择:交错!英文是:interleaving!

可以看这个图,如果看不清楚,请先清一下缓存文件在.
FF下看,效果更明显.
http://www.dajiaozi.com/ttt.gif

[ 本帖最后由 xling 于 2008-7-3 16:23 编辑 ]

我向往我美丽的梦，但是美丽的太遥远。。。
求职，有意者请联系。。。

TOP

carmen1003

中级会员

帖子: 497
体力: 317
威望: 0
当前: 浙江金华

17^# 大中小发表于 2008-7-3 17:04

转载，地址是：
http://www.ooso.net/index.php/archives/423

使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~

于是我花了点时间，打探它的实现方式，发觉很简单，不是用的lowsrc之类的标记，而是简单的js。

代码示例
PLAIN TEXTCODE:
<img id="myImage" src="small_144.jpg" width="640" />
var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}

如此这般，待大图载入完成之后，利用js替换原小图的src，就完成了图片预加载效果。关键点是图片的onload事件利用。

绿野仙踪是说一个小女孩子回家的故事。。

TOP

mugong [楼主]

初级会员

帖子: 73
体力: 164
威望: 0
当前: 北京朝阳区

18^# 大中小发表于 2008-7-4 10:59

回楼上：
“如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~”
用户看不会变化的模糊图，更空虚。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
a img{border:0;vertical-align:bottom;}
#imgnav{width:300px;border:1px solid #999;position:relative;padding:5px;}
#imgnav table{width:300px;height:300px;border:0;overflow:hidden;}
#imgnav table td{text-align:center;vertical-align:middle;padding:0;}
#imgnav table td img{width:300px;}
#imgnav .t2{position:absolute;top:5px;left:5px;z-index:999;}
#imgnav2 img{width:80px;cursor:pointer;margin:10px;}
</style>
<script type="text/javascript">
function loadpic(str){
var i=document.getElementById("imgnav").getElementsByTagName("img");
var a=document.getElementById("imgnav").getElementsByTagName("a");
i[0].src=str.src;
a[0].href=str.src.replace("abpic","pic");
a[0].title=str.title;
i[1].src=str.src.replace("abpic","pic");
a[1].href=str.src.replace("abpic","pic");
a[1].title=str.title;
}
</script>
</head>
<body>
<div id="imgnav">
<table cellspacing="0">
<tr>
<td><a href="http://home.goofar.com/mu495/pic/b4a8f7455a9d4b34879473a8.jpg" title=""><img src="http://home.goofar.com/mu495/abpic/b4a8f7455a9d4b34879473a8.jpg" /></a></td>
</tr>
</table>
<table class="t2" cellspacing="0">
<tr>
<td><a href="http://home.goofar.com/mu495/pic/b4a8f7455a9d4b34879473a8.jpg" title=""><img src="http://home.goofar.com/mu495/pic/b4a8f7455a9d4b34879473a8.jpg" /></a></td>
</tr>
</table>
</div>
<div id="imgnav2">
<img onclick="loadpic(this)" src="http://home.goofar.com/mu495/abpic/b4a8f7455a9d4b34879473a8.jpg" title="钓鱼" />
<img onclick="loadpic(this)" src="http://home.goofar.com/mu495/abpic/9dc9e035db4a401a91ef392a.jpg" title="石头" />
<img onclick="loadpic(this)" src="http://home.goofar.com/mu495/abpic/d924c5ecede7f936269791b1.jpg" title="水" />
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

牧工制造

TOP

leezy

新手上路

帖子: 55
体力: 32
威望: 0

19^# 大中小发表于 2008-7-4 16:06

PS保存的时候,如果是.png或者是.gif,保存的过程中选"Interlaced",如果是.jpg,保存的过程中选"Progressive"

TOP

xincent

初级会员

帖子: 27
体力: 59
威望: 0
离线: 37 天

20^# 大中小发表于 2008-7-5 02:26

用ajax吧

TOP