<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://js.static.m1905.cn/core/jquery-edge.min.js"></script>

<script src="http://js.static.m1905.cn/core/seed.js"></script>

<script src="http://js.static.m1905.cn/core/app.lite.min.js"></script>

<style type="text/css">

    ul li{width:162px; height: 230px; margin-top:20px; text-align: center;}

</style>

</head>

<body>

  <ul>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0210/thumb_1_162_241_20150210040409914251.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0206/thumb_1_162_241_20150206023316128193.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0210/thumb_1_162_241_20150210040703449909.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0205/thumb_1_162_241_20150205102229362443.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0115/thumb_1_162_241_20150115101740139470.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0225/thumb_1_162_241_20150225045058680991.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2015/0212/thumb_1_162_241_20150212111654208443.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2014/1222/thumb_1_153_213_20141222092403179920.jpg"/></li>

    <li><img class="load" src="http://static.m1905.cn/images/vip/cnc/lazyImg.gif" data-lazysrc="http://image11.m1905.cn/uploadfile/2014/1210/thumb_1_153_213_20141210103250766127.jpg"/></li>

  </ul>

    <script type="text/javascript">

        $(function(){

            M.use(['http://js.static.m1905.cn/ui/lazyload'],function(){

                var lazyload = M.ui.Lazyload,

                    imgs = $( '.load' ),

                    loader;

                if(imgs.length > ){

                    loader = new lazyload( imgs ,{

                        effects : "fade"

                    });

                }

            });

        });

    </script>

</body>

</html>

lazyload 图片延迟加载的更多相关文章

  1. 关于lazyload图片延迟加载简单介绍

    LazyLoad大家再熟悉不过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载 ...

  2. JQuery.lazyload 图片延迟加载

    1.引入  jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript">  $(function() {  ...

  3. jQuery前端插件以及图片延迟加载

    插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...

  4. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  5. 前端优化之图片延迟加载（lazyload.js）

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

  6. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  7. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  8. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  9. 图片延迟加载技术-Lazyload的应用

    我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...

随机推荐

  1. 一步一步制作yaffs/yaffs2根文件系统(一)---储备好基础知识再打

    开发环境:Ubuntu 12.04 开发板:mini2440  256M NandFlash   64M SDRAM 交叉编译器:arm-linux-gcc 4.4.3点此可下载 BusyBox版本: ...

  2. C3p0/元数据/内省-Bean/自定义查询封装类/查询/分页

    c3p0连接池(C3p0连接池,只有当用户获取连接时,才会包装Connection.) 第一步:导入c3p0 第二步:在classpath目录下,创建一个c3p0-config.xml 第三步:创建工 ...

  3. C#如何在派生类中不显示父类的一些属性以及TypeDescriptor使用

    public SonClass:FatherClass { 定义属性 .... } Type thisType = typeof(SonClass);方法一: PropertyInfo[] pis = ...

  4. Android2.3.7源码结构分析

    对Andorid系统进行分析或者系统功能定制的时候,我们经常需要在众多文件中花费大量时间定位所需关注的部分.为了减轻这部分枯燥而不可避免的工作,本文对2.3.7版本的源码结构进行了简单分析.希望对刚加 ...

  5. Python图

    从一位前辈的博客看到了一张图,先转过来,稍后再细看

  6. Git版本控制使用介绍

    Git是什么? Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git与SVN的最主要的区别? Git是分布式的,SVN不是 Git没有一个全局的版本号,而SVN有 ...

  7. URAL1501. Sense of Beauty(记忆化）

    链接 dfs+记忆化 对于当前状态虽然满足和差 但如果搜下去没有满足的情况也是不可以的 所以需要记忆化下 #include <iostream> #include<cstdio> ...

  8. bzoj1607: [Usaco2008 Dec]Patting Heads 轻拍牛头

    筛法. 枚举每个数,它会对它的倍数的答案有贡献. 数大了以后,倍数相应少了很多.比枚举每个数的约数要好的多. 自己yy了一种分步做法.小于sqrt(m)被当作约数枚举,大于sqrt(m)的枚举倍数. ...

  9. [原]Unity3D深入浅出 - 认识开发环境中的自带的Package资源包

    Character Controller:角色控制器 Glass Refraction(pro only):玻璃反射资源包 Image Effects :图像效果资源包 Light Cookies:光 ...

  10. WP8触摸感应Manipulation的操作

    触控感应不同事件的处理: 可将以下三个事件,绑定到一个控件中. /// <summary> /// 触摸开始事件 /// </summary> /// <param na ...