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. js验证输入框

    项目开发中,都会有对表单form中的input输入框进行一些限制验证 如: <!DOCTYPE html><html lang="en"> <head ...

  2. php include 和require的区别与转码

    php include 和require的区别相同点:include和require 都能把另外一个文件包含到当前文件中.  不同点:使用include时,当包含的文件不存在时,系统会报出警告级别的错 ...

  3. 华为P30系列新增“无线投屏”功能

    3月26日法国巴黎全球首发之后,4月11日华为又移师上海举办2019春季新品发布盛典,新一代拍照旗舰P30.P30 Pro正式登陆国内. 除了感光徕卡四摄带来的“彩色夜视仪“+“望远镜”的震撼拍照效果 ...

  4. caioj 1157 线性筛选素数

    注意这道题开得非常大,有2*1e7 自己可以养成一种习惯,如果数据是很容易的话,可以自己手动输入极限数据来测试自己的程序 #include<cstdio> #include<algo ...

  5. HNU 13108 Just Another Knapsack Problem DP + Trie树优化

    题意: 给你一个文本串,和一些模式串,每个模式串都有一个价值,让你选一些模式串来组成文本串,使获得的价值最大.每个模式串不止能用一次. 思路: 多重背包,枚举文本串的每个位置和模式串,把该模式串拼接在 ...

  6. Python学习笔记-练习编写ATM+购物车(购物商城)

    作业需求: 模拟实现一个ATM + 购物商城程序: 1.额度 15000或自定义 2.实现购物商城,买东西加入 购物车,调用信用卡接口结账 3.可以提现,手续费5% 4.支持多账户登录 5.支持账户间 ...

  7. SQL Server 性能调优2 之索引（Index）的建立

    前言 索引是关系数据库中最重要的对象之中的一个,他能显著降低磁盘I/O及逻辑读取的消耗,并以此来提升 SELECT 语句的查找性能.但它是一把双刃剑.使用不当反而会影响性能:他须要额外的空间来存放这些 ...

  8. 树莓派安装node.js

    因为树莓派是arm架构,node.js上并没有提供arm架构的二进制包下载. 试过使用apt包管理安装和直接node.js源代码编译安装(编译了四五个小时...),都没有成功,报非法指令错误,预计还是 ...

  9. vijos - P1732能量採集 (状态转移)

    P1732能量採集 Accepted 标签:NOI2010[显示标签] 背景 描写叙述 栋栋有一块长方形的地.他在地上种了一种能量植物,这样的植物能够採集太阳光的能量. 在这些植物採集能量后,栋栋再使 ...

  10. Consolidate data by using multiple page fields

    Consolidate data by using multiple page fields https://support.office.com/en-us/article/Consolidate- ...