图片太多导致在网速慢的情况下效果太差需要用js预加载图片

由于网站的图片太多了用户浏览完整个网站几乎要下载十多mb的图片
昨天晚上我在家里面访问了，当时网速很慢，但看新闻还是没有问题的（链接时间是公司的20倍），相信如果用网通或国外的网速跟这个也差别不大，用moder就更加不用说了。
在这种情况下网站的效果完全体现不出来，尤其是首页英文的介绍很久没有出来，出来后鼠标移动切换的图片也出不来，顶部大图片的logo和Welcome标题也很久没有出来，主页里面菜单的图片也有类似情况。
情况比较突出的是顶部和公司简介等轮换的图片切换由于图片没有加载完经常出现空白的现象。
只有当访问一段时间后，等图片加载到本地缓存时，点击第二次时才比较顺畅。

所以为了给首次访问网站的人比较好的效果
强烈建议首页英文介绍部分和标题 一定要用文字不能用图片（用文字对搜索引擎也比较友好），顶部的大图切割成几块小的以加快加载速度（logo 中间 口号 分成三块），同时可以用几个alert对做seo也比较好。
另外案例的图片在保证质量的情况下尽量压缩到最小。
同时在代码方面会进行一些优化，让网页在加载的时就开始加载图片而不用等到点击的时候再加载导致出来一片空白的现象。

图片预加载js

function preloadedImages()
{
heavyImage = new Image();
heavyImage[0] = "";
heavyImage[1] = "";
heavyImage[2] = "";
heavyImage[3] = "";
heavyImage[4] = "";
heavyImage[5] = "";
heavyImage[6] = "";
heavyImage[7] = "";
heavyImage[8] = "";
heavyImage[9] = "";
heavyImage[10] = "";
heavyImage[11] = "";
heavyImage[12] = "";
heavyImage[13] = "";
heavyImage[0].src = "../images/index/left/who-we-are-cn1.jpg";
heavyImage[1].src = "../images/index/left/who-we-are-cn2.jpg";
heavyImage[2].src = "../images/index/left/what-we-do-cn1.jpg";
heavyImage[3].src = "../images/index/left/what-we-do-cn2.jpg";
heavyImage[4].src = "../images/index/left/how-we-do-cn1.jpg";
heavyImage[5].src = "../images/index/left/how-we-do-cn2.jpg";
heavyImage[6].src = "../images/index/left/what-we-done-cn1.jpg";
heavyImage[7].src = "../images/index/left/what-we-done-cn2.jpg";
heavyImage[8].src = "../images/index/left/who-we-serve-cn1.jpg";
heavyImage[9].src = "../images/index/left/who-we-serve-cn2.jpg";
heavyImage[10].src = "../images/index/left/for-customer-cn1.gif";
heavyImage[11].src = "../images/index/left/for-customer-cn2.gif";
heavyImage[12].src = "../images/index/left/copyright1.jpg";
heavyImage[13].src = "../images/index/left/copyright2.jpg";
}

为了不影响正常内容的出现，在body前面加入<script type="text/javascript">preloadedImages();</script>

 

来自http://hi.baidu.com/zdz8207/blog/item/5d7e75c639b1e61f9d163d90.html