least.js懒加载响应式相册

因为项目与图片资源服务器分离，而首页若是全部加载图片的话会很慢、所以研究了一下懒加载的例子，然后我们加入到了相册当中，并且相册里的图片支持小图切换大图。

分类：图片代码 > 延迟加载难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

相册#gallery结构：#fullPreview预览图，每个li一个图片

<ul id="gallery">
    <li id="fullPreview"></li>
    <li>
        <a href="img/full/full_1.jpg"></a>
        <img data-original="img/thumb/thumb_1.jpg" src="img/effects/white.gif" width="240" height="150" alt="素材火" />

        <div class="overLayer"></div>
        <div class="infoLayer">
            <ul>
                <li><h2>素材火</h2></li>
                <li><p>查看图片</p></li>
            </ul>
        </div>
        <div class="projectInfo">
            <strong>jQuery特效:</strong> http://www.sucaihuo.com为网页前端人员提供常用的网页特效,包括手机特效、图片代码、导航菜单、选项卡/滑动门资源、文字特效、表单代码、提示框/浮动层/弹出层等资源
        </div>
    </li>
</ul>

引入懒加载插件jquery.lazyload.js和相册插件least.min.js

<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script src="js/least.min.js"></script>