http://plugins.jquery.com/lazyload/

Jquery.LazyLoad.js插件参数详解：

1,用图片提前占位
placeholder : "img/grey.gif",
参数:placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏

2,载入使用何种效果
effect : "fadeIn",
参数：effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

3,提前开始加载
threshold : 200,
参数:threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉.

4,事件触发时才加载
event : "click",
参数:event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

5,对某容器中的图片实现效果
container: $("#container"),
参数:container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6,图片排序混乱时
failurelimit : 10,
参数:failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.

---------------------------------------------------------------------------------------------------------------------------------

</head>
<body>
<!--width height这两个属性一定要加，起到占位作用-->
        <img class="lazy" data-original="http://localhost:19265/img/02.jpg" width="399px" height="600px" border="0" alt=""/><br/>  
        <img class="lazy" data-original="http://localhost:19265/img/03.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/04.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/05.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/06.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/07.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/08.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/09.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/10.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/11.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/12.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/13.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/14.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/15.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/16.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/17.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/18.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/19.jpg" width="399px" height="600px" border="0" alt=""/><br/>
        <img class="lazy" data-original="http://localhost:19265/img/20.jpg" width="399px" height="600px" border="0" alt=""/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/Script/jquery.lazyload.js"></script>
    <script type="text/javascript">
        $(function () {
            $("img.lazy").lazyload({
                effect: "fadeIn"
            });

});
    </script>
</body>
</html>

lazy load 图片延迟加载 跟随滚动条相关推荐

  1. （转）jQuery插件:Image lazy loader图片延迟加载

    原文地址:http://www.cnblogs.com/cnfiowen/archive/2010/02/22/1671483.html Lazy Load 是一个用 JavaScript 编写的 j ...

  2. JS实现图片延迟加载（图片懒加载）

    1.为什么需要做图片的懒加载        =>第一次加载页面的时候,如果请求真实图片资源,会减缓页面的渲染速度,为了提高首次打开的体验度,我们最开始不加载真实的图片资源(比如大小很小的背景图片 ...

  3. JS实现移动端图片延迟加载

    图片延迟加载常见的有,jquery.lazyload.js,原生JS实现的echo.js.但是都是必须给图片设置宽高. 因为项目是移动端,而且无法在加载前知道图片的宽高,所以,只好自己写了一个. 既然 ...

  4. Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase

    Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器 ...

  5. Lazy Load, 延迟加载图片的 jQuery 插件

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. 延迟加载图片 Lazy Load

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加 载长页面中的图片 . 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图 ...

  7. SAP Spartacus 的延迟加载 Lazy load 设计原理

    官方链接 延迟加载,也称为代码拆分,可让您将 JavaScript 代码分成多个块. 结果是当用户访问第一页时,您不必加载完整应用程序的所有 JavaScript. 相反,只加载给定页面所需的块. 在 ...

  8. SAP 电商云 Spartacus UI Component 级别的延迟加载实现(Lazy Load)

    注:Spartacus 推荐客户尽量使用 feature 级别的 lazy load,而非 Component 级别的 lazy load. 后者的具体实现步骤: app 文件夹下新建一个 cms-c ...

  9. Angular Lazy load(延迟加载，惰性加载) 机制和 feature module 的学习笔记

    官网链接 默认情况下,NgModules 是贪婪加载的,这意味着一旦应用程序加载,所有 NgModules 也会加载,无论它们是否立即需要. 对于有很多路由的大型应用程序,可以考虑延迟加载--一种根据 ...

最新文章

  1. 【F#2.0系列】介绍String类型
  2. Node.js 笔记 http服务器
  3. 看看这帮猴子的伪原创工具
  4. 分享几个大数据相关岗位的职责和面试问题
  5. 【C语言】数学也没辣么难嘛
  6. 平均薪资 38.4 万！3 步教你成为区块链开发者，收好这份学习指南！
  7. 计算机软件uml,[计算机软件及应用]UML.ppt
  8. 国人走向世界的一个很好的艺术与设计网站
  9. python 经典图书排行榜_书榜 | 计算机书籍（1.7-1.13）销售排行榜
  10. 用笔记本创建wifi热点
  11. filevault（电子仓库）自动切换文件夹以及文档最大值设置
  12. SpringBoot重点详解--事件监听
  13. Contrast Preserving Decolorization
  14. JavaScript 实现微信公众号内分享功能
  15. 苹果终止位置共享无法连接服务器,苹果发布临时解决方案指导用户处理macOS无法共享访问Windows的问题...
  16. 211毕业生3天被辞退：offer不等于工作稳了！
  17. Python-Flask开发微电影网站(一)
  18. 在Windows上使用EDA软件——利用WSL安装IC618、SPECTRE181
  19. C/C++版本更迭历程
  20. 轮式机器人算法仿真的一些杂七杂八02

热门文章

  1. 基于k8s的测试执行工具：TestKube
  2. 选择软件测试作为你的职业，一个无经验的大学毕业生，可以转行做软件测试吗？
  3. Pytest学习-如何在用例代码中调用fixtrue时传入参数
  4. MATLAB gui 对表格增添（删除）数据
  5. mysql存储java对象_Mysql存储java对象 | 学步园
  6. Php怎么挑出不含4的数,关于 64 位 PHP 使用 PHP_INT_SIZE 输出得到 4 的问题
  7. 判断某个磁盘中是否有某个文件
  8. AI学习笔记（七）图像滤波器、OpenCV算法解析
  9. python leetcode_八十二、Python | Leetcode贪心算法系列
  10. 从零开始刷Leetcode——数组（643.665.674）