这里主要讲类似于bannner等大图优化加载问题；

首先看html中主要用的是<img src="">还是{background-image:url()};

如果是第一种：

　　我会选择用懒加载来处理图片；

<script type="text/javascript" src="http://www.mamicode.com/js/lazy_min.js"></script>
<script>
    $(function(){
        //懒加载
        $("img.lazy").lazyload({
            effect : "fadeIn",
            skip_invisible : false,// Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false
            threshold : 200,// 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载
            failure_limit : 10//当插件找到 10 个不在可见区域的图片时才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点
        });
    });
</script>

如果是第二种：

　　我选择用ps里面存储图片的点选“连续”功能。

网站优化之图片