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

一、总结

一句话总结：图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是：懒加载的基础上面加上了动画效果，比如fade

使用的话简单到爆，倒是没有什么好说。

二、图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

百度盘下载地址：

链接：https://pan.baidu.com/s/1TiZ2u6itIj4q9gVVpwQ5tg 密码：ceko

1、截图

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <link rel="stylesheet" href="./amazeui.min.css">

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

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

     <script src="./echo.js"></script>

 </head>

 <body>

     <div>

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

         <img src="img/blank.gif" alt="Photo" data-echo="img/gallery_hk1.png">

     </div>

 </body>

 <!-- <script>

 echo.init({

   offset: 100,

   throttle: 250,

   unload: false,

   callback: function (element, op) {

     console.log(element, 'has been', op + 'ed')

   }

 });

 // echo.render(); is also available for non-scroll callbacks

 </script> -->

 <script>

   echo.init({

     callback: function(element, op) {

       if (op === 'load') {

         $(element).scrollspy({animation:'fade'});

       }

       console.log(element, 'has been', op + 'ed')

     }

   });

 </script>

 </html>

代码的效果就是懒加载的基础上面加上了fade的效果，也就是动画的效果

 

js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的更多相关文章

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

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  2. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  3. 图片懒加载 echo.js

    (function (root, factory) { if (typeof define === 'function' && define.amd) { define(functio ...

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

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

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

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

  6. Js 之图片懒加载插件

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

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

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

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

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

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

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

随机推荐

  1. [原创]关于javax.servlet.ServletException: File [&#47;loginController&#47;getVerifCode.jsp] not found异常 解决方案

    如果前台可以访问 后台并且有数据进行响应,那么一下方案也许可以帮到你... 修改前: 出现异常 javax.servlet.ServletException: File [/loginControll ...

  2. keepalived的功能及DR模式搭建笔记

    一.HA集群中的相关术语 1.节点(node) 运行HA进程的一个独立主机,称为节点,节点是HA的核心组成部分,每个节点上运行着操作系统和高可用软件服务,在高可用集群中,节点有主次之分,分别称之为主节 ...

  3. Java基础学习总结（5）——多态

    一.面向对象最核心的机制--动态绑定,也叫多态 1.1.通过下面的例子理解动态绑定,即多态 package javastudy.summary; class Animal { /** * 声明一个私有 ...

  4. Qt之图形（QPainter的基本绘图）

    简述 Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类. QPainter用来执行 ...

  5. 3D拾取技术

    在unity3d中用户通过触摸屏选中虚拟3D世界中的物体进行操控,就须要掌握3d 拾取技术. 3d拾取技术很的简单:由摄像机与屏幕上的触控点之间确定一条射线.由此射线射向3d世界, 最先和此射线相交的 ...

  6. Ubuntu设置显示桌面快捷键

    Ubuntu设置显示桌面快捷键 直接在系统设置中没有效果, 学习了:http://www.cnblogs.com/pluse/p/5286585.html 需要进行安装compizconfig,然后在 ...

  7. wireshark界面调整成英文的

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

  8. [luogu P2586] GCD 解题报告 (莫比乌斯反演|欧拉函数)

    题目链接:https://www.luogu.org/problemnew/show/P2568#sub 题目大意: 计算​$\sum_{x=1}^n\sum_{y=1}^n [gcd(x,y)==p ...

  9. deque 归纳

    deque是STL里面的常见容器,它的本质是一个队列,但是与队列不同是的是,它可以两边进出. 下面是STL的一些常见操作. que.assign(beg,end) 将[beg; end)区间中的数据赋 ...

  10. AngularJs轻松入门（四）模块化

    在前面几节教程中,代码比较少,为了方便说明问题笔者將控制器代码都写在了HTML页面中,实际上这并不是什么好的编程习惯,而且可维护性差.通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中,然后在 ...