js插件---图片懒加载lazyload

一、总结

一句话总结：使用异常简单，src里面放加载的图片，data-original里面放原图片，不懂的位置去官网或者github找API就好。

1、lazyload官网的API演示怎么找到？

跟着github上面的网址一级一级的摸上去的，github上面显示的资料有限

官网地址：Lazyload Images After Five Second Delay
https://appelsiini.net/projects/lazyload/timeout/

2、延时加载怎么实现？

直接放到window的load方法里面等5s就好，

 window.addEventListener("load", function(event) {

     let timeout = setTimeout(function() {

         $("img.lazy").lazyload({

             effect : 'fadeIn',

             event : 'sporty'

         });

     }, 5000);

 });
$("img.lazy").lazyload()

这句话是正常的运行懒加载

二、图片懒加载lazyload

百度盘下载地址：

链接：https://pan.baidu.com/s/1MVLxVWgTAyke1smT0kVacQ 密码：ikn4

1、截图

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

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

     <script src="amazeui.lazyload.js"></script>

     <style>

         .lazy {

          margin: 10px auto;

          background: url(docs/img/loading.gif) no-repeat center center;

         }

     </style>

 </head>

 <body>

     <img class="lazy" src="docs/img/loading.gif" data-original="docs/img/bmw_m1_hood.jpg" width="640" height="480">

     <div id="container">

       <button type="button" class="am-btn am-btn-danger">点击载入图片</button>

     </div>

     <div class="lazy" data-original="docs/img/bmw_m1_hood.jpg" style="width: 765px; height: 574px;"></div>

 </body>

 <script>

 window.addEventListener("load", function(event) {

     let timeout = setTimeout(function() {

         $("img.lazy").lazyload({

             effect : 'fadeIn',

             event : 'sporty'

         });

     }, 5000);

 });

 $('#container').one('click', function() {

   $('#container').load('test.html', function(response, status, xhr) {

     $('img.lazy').lazyload();

   });

 });

 $('div.lazy').lazyload({

   effect : 'fadeIn'

 });

 </script>

 </html>
 

js插件---图片懒加载lazyload的更多相关文章

  1. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  2. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  3. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  4. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  5. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  6. 图片懒加载lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  7. Js 之图片懒加载插件

    一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...

  8. 图片懒加载--lazyload.js的用法

    这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...

  9. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

随机推荐

  1. （2016北京集训十）【xsy1530】小Q与内存

    一道很有意思的神题~ 暴力平衡树的复杂度很对(并不),但是$2^{30}$的空间一脸屎 这题的正解是一个类似线段树的数据结构,我觉得很有创新性Orz 首先可以想到一种暴力就是用一个点代表一个区间,然后 ...

  2. LVM的创建与挂载

    LVM的诞生: 由于传统的磁盘管理不能对磁盘进行磁盘管理,比如我把/dev/sdb1挂载到了/liu目录下,但是因为数据量过大的原因,此文件系统磁盘利用率已经高达98%,那么我可以直接对这个磁盘进行扩 ...

  3. 紫书 例题 11-3 UVa 1151 （有边集的最小生成树+二进制枚举子集）

    标题指的边集是说这道题的套餐, 是由几条边构成的. 思路是先做一遍最小生成树排除边, 因为如果第一次做没有加入的边, 到后来新加入了很多权值为0的边,这些边肯定排在最前面,然后这条边的前面的那些边肯定 ...

  4. 紫书 习题 8-1 UVa 1149（贪心）

    排序之后, 尽量最小和最大的放在一个背包, 放不下就放最大的. #include<cstdio> #include<algorithm> #define REP(i, a, b ...

  5. 基于Core Text实现的TXT电子书阅读器

    本篇文章的项目地址基于Core Text实现的TXT电子书阅读器. 最近花了一点时间学习了iOS的底层文字处理的框架Core Text.在网上也参考很多资料,具体的资料在文章最后列了出来,有兴趣的可参 ...

  6. Java设置Client Socket链接Server超时时间

    Java设置Client Socket链接Server超时时间 学习了:http://blog.csdn.net/tterminator/article/details/52494141 http:/ ...

  7. 阿里云X-Forwarded-For 发现tomcat记录的日志所有来自于SLB转发的IP地址，不能获取到请求的真实IP。

    1.背景:阿里云的SLB的负载均衡,在tomcat中获取不到真实IP,而是阿里的内网IP,SLB中俩台或者3台本身是局域网,这里是SLB原理,能够看看.没怎么看懂.呵呵,要细细读下. 2.须要开启to ...

  8. 图文介绍MyEclipse (2015) 中创建简单的Maven项目的步骤（用于生成可运行jar文件）

    利用MyEclipse的引导,能够非常方便的创建简单的.用于生成可运行jar文件的Maven项目: (原创文章,转载请注明转自Clement-Xu的博客:http://blog.csdn.net/cl ...

  9. thinkPHP的模板是做什么用的

    thinkPHP的模板是做什么用的 问题 为什么PHP中ThinkPHP有做类似模板引擎的东西?smarty也是?这些到底有何用? 我是真没发现它们的用处在哪里?分离了前端和PHP的依赖?HTML文件 ...

  10. [NOI2002] Robot 解题报告(数论+DP)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1408 Description 3030年,Macsy正在火星部署一批机器人. 第1秒,他 ...