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. 紫书 例题11-11 UVa 12661 （dihkstra变形）

    这道题主要比较权值的时候要改变一下,其他地方基本一样. 比较权值的时候要考虑边的时间与a, b 可以设相对于当前边的时间now, 则now = d[u] % (a+b), 也就是当前这个边进行到整个a ...

  2. SpringBoot实战（四）获取接口请求中的参数(@PathVariable，@RequestParam，@RequestBody)

    上一篇SpringBoot实战(二)Restful风格API接口中写了一个控制器,获取了前端请求的参数,现在我们就参数的获取与校验做一个介绍: 一:获取参数 SpringBoot提供的获取参数注解包括 ...

  3. 基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

    前言 基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页.模糊查询(非DataTables Search),页面异步刷新. 说明:sp:message标签是使用了S ...

  4. windows 下面的grep awk 命令

    windows 下面的grep awk 命令 grep 学习了:http://blog.csdn.net/chengfans/article/details/53784936 awk学习了:http: ...

  5. zookeeper应用场景练习（分布式锁）

    在寻常的高并发的程序中.为了保证数据的一致性.因此都会用到锁.来对当前的线程进行锁定.在单机操作中.非常好做到,比方能够採用Synchronized.Lock或者其它的读写多来锁定当前的线程.可是在分 ...

  6. hdoj 1719 Friend

    Friend Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  7. Atitit.运行cmd 命令行 php

    Atitit.运行cmd 命令行 php 1. 运行cmd 命令行,调用系统命令的基础 1 1.1. 实际运行模式 1 1.2. 空格的问题 1 1.3. 中文路径的问题.程序文件读取编码设置 1 1 ...

  8. wireshark界面调整成英文的

    https://ask.wireshark.org/questions/48823/change-the-gui-language 英文版设置 From the Edit (Bearbeiten) m ...

  9. BZOJ 4269 高斯消元求线性基

    思路: 最大: 所有线性基异或一下 次大: 最大的异或一下最小的线性基 搞定~ //By SiriusRen #include <cstdio> #include <algorith ...

  10. [-] Failed to load plugin from /usr/share/metasploit-framework/plugins/db_autopwn: No classes were loaded from /usr/share/metasploit-framework/plugins/db_autopwn in the Msf::Plugin namespace.

    问题详情 然后,执行,出现如下问题,则说明大家的这个文件,下载不是完整的或者你上传不完整. msf > load db_autopwn [-] Failed to load plugin fro ...