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. CF17E Palisection（manacher)

    题意 给出一个长度为N的字符串S,问S中有多少个回文子串对(i,j)使得i,j在S中的位置相交?(N<=2*106) 题解 #include<iostream> #include&l ...

  2. caioj 1158 欧拉函数

    直接套模板,这道题貌似单独求还快一些 解法一 #include<cstdio> #include<cctype> #define REP(i, a, b) for(int i ...

  3. C#之改变窗体icon图标、新建类文件、调用dll库

    一.改变窗体的图标 没有修改之前为: 修改之后为自己想要的图标: 需要在窗体Form1.cs属性里边添加icon图片文件: 二.新建cs类文件 如下图所示,新建一个类文件,我用于来调用库文件也可以来定 ...

  4. JAVA SSL

    http://docs.oracle.com/javase/1.5.0/docs/guide/security/jsse/JSSERefGuide.html#InstallationAndCustom ...

  5. [读书]Python学习手冊--属性管理1

    属性管理-特性 一般开发这不必关心属性的实现.对工具的构建这来说,了解这一块对API的灵活性有帮助. 大多数情况下,属性位于对象自身之中.或者继承自对象所派生自的一个类. ----python学习手冊 ...

  6. 【Android进阶篇】Fragment的两种载入方式

    一.概述 Fragment(碎片,片段)是在Android 3.0后才引入的,基本的目的是为了实如今大屏幕设备上的更加动态更加灵活的UI设计. 这是由于平板电脑的屏幕比手机大得多,所以屏幕上能够放很多 ...

  7. Android 主界面长按创建快捷方式

    Android中创建快捷方式主要有两种方式.一是在代码中直接加入生成桌面快捷方式的代码:二是通过小部件加入; 这篇文章主要讲另外一种方法! 1.通过在AndroidManifest文件里为Activi ...

  8. HTML5 界面元素 Canvas 參考手冊

    HTML5 界面元素 Canvas 參考手冊 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...

  9. Android5.0以上系统的移动网络开关

    笔者近期遇到一个非常有意思的bug,贴出来和大家分享下. 那是一个温暖的早晨,阳光晒得人非常舒服.一封bug邮件像一片叶子飘到我的邮箱. 一番交流.笔者确认负责的Widget开关在Android5.0 ...

  10. Struts2中Struts.xml的作用

    struts.xml 为Struts 2的核心配置文件.struts.xml文件主要负责管理应用中的Action映射,以及该Action包含的Result定义等.struts.xml中主要配置Stru ...