我的照片库页面让位于漫长的加载时间。有简单的方法吗？我试着让图像变小，以便加载更快，但它仍然非常慢，有时会冻结。
这是约60张照片。
CSS：
#center img
{
opacity:0.5;
-webkit-transition: opacity 1s linear;
}
#center img:hover
{
opacity:1.0;
-webkit-transition: opacity 1s linear;
}
#center {
float: left;
margin: 10px 0 10px 20px;
min-width: 200px; width: 494px; border-radius:8px;
}
#center a img {
border: 2px solid black;
height: 100px;
margin-top: 4px;
vertical-align: top;
width: 145px;
}
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<script language="JavaScript">
<!--hide
var password;
var pass1="maze";
password=prompt('Please enter your password to view this page!',' ');
if (password==pass1)
alert('Password Correct! Click OK to enter page you mazers!');
else
{
window.location="http://fun256.com/photos/411.png";
}
//-->
</script>
<title>Predict the Result</title>
<meta charset="utf-8">
<link rel="stylesheet" href="april.css" />
</head>
<body>
<div id="container" class="clearfix">
<!-- Header --> <!-- Left Column -->
<div id="center">
<a href="IMG_0590.jpg" target="_blank"><img src="IMG_0590.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0591.jpg" target="_blank"><img src="IMG_0591.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0592.jpg" target="_blank"><img src="IMG_0592.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0593.jpg" target="_blank"><img src="IMG_0593.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0594.jpg" target="_blank"><img src="IMG_0594.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0595.jpg" target="_blank"><img src="IMG_0595.jpg" height="228" width="304" alt="" /> </a><a href="IMG_0596.jpg" target="_blank"><img src="IMG_0596.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0597.jpg" target="_blank"><img src="IMG_0597.jpg" height="228" width="304" alt="" /> </a> <a href="IMG_0598.jpg" target="_blank"><img src="IMG_0598.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0599.jpg" target="_blank"><img src="IMG_0599.jpg" height="228" width="304" alt="" /> </a> <a href="IMG_0600.jpg" target="_blank"><img src="IMG_0600.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0601.jpg" target="_blank"><img src="IMG_0601.jpg" height="228" width="304" alt="" /> </a> <a href="IMG_0602.jpg" target="_blank"><img src="IMG_0602.jpg" height="228" width="304" alt="" /> </a>
<a href="IMG_0530big.jpg" target="_blank"><img src="IMG_0530.jpg" height="228" width="304" alt="" /> </a> <a href="IMG_6098.jpg" target="_blank"><img src="IMG_6098.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0531.jpg" target="_blank"><img src="IMG_0531.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0532.jpg" target="_blank"><img src="IMG_0532.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0533.jpg" target="_blank"><img src="IMG_0533.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0534.jpg" target="_blank"><img src="IMG_0534.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0535.jpg" target="_blank"><img src="IMG_0535.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0536.jpg" target="_blank"><img src="IMG_0536.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0537.jpg" target="_blank"><img src="IMG_0537.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0538.jpg" target="_blank"><img src="IMG_0538.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0539.jpg" target="_blank"><img src="IMG_0539.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0540.jpg" target="_blank"><img src="IMG_0540.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0541.jpg" target="_blank"><img src="IMG_0541.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0542.jpg" target="_blank"><img src="IMG_0542.jpg" height="228" width="304" alt="" /></a><a href="IMG_0543.jpg" target="_blank"><img src="IMG_0543.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0544.jpg" target="_blank"><img src="IMG_0544.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0545.jpg" target="_blank"><img src="IMG_0545.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0546.jpg" target="_blank"><img src="IMG_0546.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0547.jpg" target="_blank"><img src="IMG_0587.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0548.jpg" target="_blank"><img src="IMG_0548.jpg" height="228" width="304" alt="" /></a><a href="IMG_0549.jpg" target="_blank"><img src="IMG_0549.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0550.jpg" target="_blank"><img src="IMG_0550.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0551.jpg" target="_blank"><img src="IMG_0551.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0552.jpg" target="_blank"><img src="IMG_0552.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0553.jpg" target="_blank"><img src="IMG_0553.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0554.jpg" target="_blank"><img src="IMG_0554.jpg" height="228" width="304" alt="" /></a><a href="IMG_0555.jpg" target="_blank"><img src="IMG_0555.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0556.jpg" target="_blank"><img src="IMG_0556.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0557.jpg" target="_blank"><img src="IMG_0557.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0558.jpg" target="_blank"><img src="IMG_0558.jpg" height="228" width="304" alt="" /></a> <a href="IMG_0559.jpg" target="_blank"><img src="IMG_0559.jpg" height="228" width="304" alt="" /></a>
<a href="IMG_0560.jpg" target="_blank"><img src="IMG_0560.jpg" height="228" width="304" alt="" /></a></div>
</div>
<div></div>
<div>Copyright "Younani" Michael Younani 2012</div>
</body>
</html>
答案 0 :(得分：1)
您似乎正在显示图库的完整尺寸图像，并使用html调整其大小。这不是最佳做法，因为它要求用户以全分辨率下载所有图像。其中60个太多了，下载量可能超过10mb，这是猜测。
另外，使用宽度和高度来调整图像大小并不利于提高性能。
答案是缩略图。 您必须为每个图像制作一个较小的副本，并在幻灯片的链接中使用它，而不是仅显示全尺寸图像的压扁版本。
您还可以使用某种形式的延迟加载，只有在需要时才会显示图像。
看起来您手动执行此操作，因此您可能会发现在Picasa中生成网络相册可以快速轻松地制作缩略图。
我希望这会有所帮助。