怎么样让图片显示速度加快 - 编程论坛

#2

gupiao1752010-06-10 17:33

建议你一个思路：
如果空间商的速度你无法改变的话，那就用更人性化些的提示，比如用一个JS去判断图片是否加载完成，如果没有就提示数据正在加栽中，类似AJAX的应用，等图片加载完毕，再显示出来，这样就不会出现图片拖带现象！不过这也不是一个好方法，最关键还是空间商的速度应该给你放开！

#3

icecool2010-06-10 17:39

如果是一个很大的图片因下载要较长时间，可将图片分割成小图片，在网页上拼成整张，

这样打开时感觉上会快很多！

#4

szchenli2010-06-10 17:47

能不能让图片先加载，让后在同一时间一起显示

#5

szchenli2010-06-10 17:55

速度怎么设置呀，在服务器上？

#6

笨笨林2010-06-11 06:10

用缩略图。首页一般不要显示大图的。
有关ASP生成缩略图的代码请另找。

#7

hams2010-06-11 08:46

先找找原因，是哪一个环节慢了。

#8

szchenli2010-06-11 09:14

网站用div+css写，显示图片是一块一块的加载，能不能一起加载？

#9

szchenli2010-06-11 09:51

预启动是什么？怎么做到？是要用javascript么？好像可以等到图片加载完成后，再显示页面？

#10

szchenli2010-06-11 09:55

没加载完之前用图片,加载完之后呈现页面

#11

hams2010-06-11 09:57

用FLASH吧

#12

gupiao1752010-06-11 13:58

以下是引用笨笨林在2010-6-11 06:10:58的发言：

用缩略图。首页一般不要显示大图的。
有关ASP生成缩略图的代码请另找。

林说的这个方法不错，值得推荐！认真看了下你的图片体积太大，你到PS里处理一下，把大小改为你希望的大小，另外压缩度大些，当然要保证不影响图片可视质量的情况下！

#13

gupiao1752010-06-11 14:04

压缩的大小标准以你的<IMG标签里的width,height为准，你里面用了100px,100px,那么在PS就把图象大小改为这么大，充分发挥PS的能力！压缩后，把原图和压缩后的图比较大小，改变大小的时候有一个压缩选项，你尽可能选择小的！这个很关键，是图片文件能否变得更小的核心！

#14

szchenli2010-06-11 17:37

我处理了图片，现在稍微好了点，但是还是不够快。
我想要的结果是图片不要边加载边显示，是要等到所有的图片全部加载完成后，页面一下子全部显示，是要用到javascript吧？
请问有这方面的资料么？

#15

gupiao1752010-06-13 15:10

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.">
<html xmlns="http://www.">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片加载延时简易处理办法</title>
</head>
<script language="javascript">
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function Imagess(url,imgid,callback){
    var val=url;
    var img=new Image();
    if(Browser.ie){
        img.onreadystatechange =function(){
            if(img.readyState=="complete"||img.readyState=="loaded"){
                callback(img,imgid);
            }
        }
    }else if(Browser.Moz){
        img.onload=function(){
            if(true){
                callback(img,imgid);
            }
        }
    }
    //如果因为网络或图片的原因发生异常，则显示该图片
    img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
    img.src=val;
}
//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).innerHTML="<img src="+obj.src+" width=300px; height=300px;>";
}
//初始化需要显示的图片，并且指定显示的位置
window.onload=function(){
    Imagess("http://www.","img1",checkimg);
    Imagess("http://www.","img2",checkimg);
    Imagess("http://www.","img3",checkimg);
}
</script>
<body>
<div id="img1"  style="width:300px;height:300px;border:1px solid #f4f4f4;position:absolute;top:5px;left:50px;text-align:center;">数据载入中....</div>
<div id="img2"  style="width:300px;height:300px;border:1px solid #f4f4f4;position:absolute;top:5px;left:400px;text-align:center;">数据载入中....</div>
<div id="img3"  style="width:300px;height:300px;border:1px solid #f4f4f4;position:absolute;top:5px;left:750px;text-align:center;">数据载入中....</div>
</body>
</html>

一方面你可以尽可能缩小图片体积！
另一方面用代码进行处理：这是一个简易处理方法，无法显示具体进度，但是却可以保证不会出现拖尾现象，也能做到等到所有的图片全部加载完成后，页面一下子全部显示！
兼容2种浏览器IE和火狐，其他的我还没测试过！

#16

gupiao1752010-06-13 15:15

至于界面美观，你可以找一些AJAX加载图片的小GIF图片，就是那种一直在转的小图片，这样即使图片不能马上加载，也不至于让浏览者在等待中感到很乏味！具体应该怎么做，就是美工应该思考的问题了！