在做嘀嗒萌的时候遇到了一个问题，因为网站是动漫站，首页需要放很多的图片，这样就涉及到一个网站加载速度的问题。 原先网站上部有一个十张图的大幻灯，一张图少说也200K了，这就造成了打开网站首页需要等很久。我们这种小屌丝是买不起那么大的带宽的vps的。 那么问题来了，挖掘机技术哪家强？ 。。。。 偏了，偏了，如何让大图延迟加载来提高网页整体的加载速度呢？ 于是就有了图片异步加载，百度了一把（因为打不开谷歌）。 找到了一个早一点的解决方案，就是lazyload.js 上代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : /js/grey.gif", //加载图片前的占位图片
     effect      : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script>

但是放上去后好像没有什么卵用，气急败坏：这还做毛SEO用户体验啊！ 但是在下拉的时候发现：诶？好像下边的图片是延迟加载的，（骂早了。。） 因为并不懂什么是JS，直接拿来套的，没理解原理，想了想大概知道了，是要在屏幕外的才不会加载。姑且这么理解吧。   但是这不行啊，就比如我这样，幻灯，肯定会在第一屏。那这个异步就等于没用了。 辗转反侧，下午在找幻灯特效的时候看到了superslide家的竟然也有异步，而且这个异步正合幻灯加载的胃口，不显示到这一页的幻灯就不加载，就等于说打开首页只会加载幻灯的第一张，这极大的减少了首页初次加载大小。 不敢私藏

<div id="switchLoad">
    <div class="hd">
        <ul>
            <li>全部</li>
            <li>爱情</li>
            <li>动作</li>
            <li>喜剧</li>
        </ul>
    </div>
    <div class="bd">
            <ul>
                <li><a href="http://www.SuperSlide2.com"><img src="images/blank.png" _src="images/1.1.jpg"></a>
                    <h6>《一代宗师》特辑</h6><p>幕后制作特辑</p>
                </li>
                ......
            </ul><!-- ul E -->
            <ul>
                <li><a href="http://www.SuperSlide2.com"><img src="images/blank.png" _src="images/2.1.jpg"></a>
                    <h6>《一代宗师》特辑</h6><p>幕后制作特辑</p>
                </li>
                ......
            </ul><!-- ul E -->
            <ul>
                <li><a href="http://www.SuperSlide2.com"><img src="images/blank.png" _src="images/3.1.jpg"></a>
                    <h6>《一代宗师》特辑</h6><p>幕后制作特辑</p>
                </li>
                ......
            </ul><!-- ul E -->
            <ul>
                <li><a href="http://www.SuperSlide2.com"><img src="images/blank.png" _src="images/4.1.jpg"></a>
                    <h6>《一代宗师》特辑</h6><p>幕后制作特辑</p>
                </li>
                ......
            </ul><!-- ul E -->
    </div>
</div>
			<script type="text/javascript">
				jQuery(".switchLoad").slide({ trigger:"click",switchLoad:"_src",delayTime:0 });
			</script>

这是官方给出的代码，要先引入JQ库和superslide库，

<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script><script src="/jquery.SuperSlide.2.1.1.js"></script>

代码有点多，其实真正用到的除了必须的JS调用就只是

<img src="images/blank.png" _src="images/4.1.jpg">

这一句而已。 戳这里下载库 http://pan.baidu.com/s/1jG1ufJK