<!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. VPN+NAT实现代理服务器功能

    前话 用VPN+NAT再结合路由可以实现很方便的代理功能,适用于有一台能方便连接Internet的电脑,其他不在同一子网内的电脑能够连接到这台机器但不能完全访问Internet.比如好些学校的校园网, ...

  2. 拒绝卡顿——在WPF中使用多线程更新UI

    原文:拒绝卡顿--在WPF中使用多线程更新UI 有经验的程序员们都知道:不能在UI线程上进行耗时操作,那样会造成界面卡顿,如下就是一个简单的示例: public partial class MainW ...

  3. python string 连接test

    def strTest(): name = "" for i in range(10): name += "hello" #print name def str ...

  4. hadoop博客

    http://www.cnblogs.com/scotoma/ http://www.cnblogs.com/xia520pi/

  5. R语言笔记：快速入门

    1.简单会话 > x<-c(1,2,4) > x [1] 1 2 4 R语言的标准赋值运算符是<-.也可以用=,不过不建议用它,有些情况会失灵.其中c表示连接(concaten ...

  6. (转)详解LVS负载均衡之三种工作模型原理和10种调度算法

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://linuxnx.blog.51cto.com/6676498/1195379 LV ...

  7. Java 关于中文乱码处理的经验总结【转载】

    为什么说乱码是中国程序员无法避免的话题呢?这个首先要从编码机制上说起,大家都是中文和英文的编码格式不是一样,解码也是不一样的!如果中国的程序员不会遇到乱码,那么只有使用汉语编程.汉语编程是怎么回事我也 ...

  8. Android开发之ADT导入Support Library

    在工程中增加(例如 support-v4 Library) 在ADT中需要按照以下步骤:  1.右击当前工程,查找Properties 2.选择Java Build Path 3.选择Librarie ...

  9. 用shell写个100以内的所有数字之和

    #!/bin/bash i=2 while ((i<=100));do j=2 while ((j<=i/2));do if ((i%j==0));then break fi let j+ ...

  10. 转: 解决MSYS2下的中文乱码问题

    解决方案 新建/usr/bin/win: 12 #!/bin/bash$@ |iconv -f gbk -t utf-8 新建/etc/profile.d/alias.sh: 12345678 ali ...