least.js懒加载响应式相册

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

相册#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.erdangjiade.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>