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. pm2 配置

    ---恢复内容开始--- 1. ecosystem.json { "apps": [ { "name": "name", // 项目名 &q ...

  2. NumberFormat类

    NumberFormat表示数字的格式化类,即可以按照本地的风格习惯进行数字的显示. NumberFormat是一个抽象类,和MessageFormat类一样,都是Format类的子类,本类在使用时可 ...

  3. 解决方案:Default Activity Not Found !

    在Android Studio 中按 Ctrl+F11运行工程的时候,突然弹出一个Edit Configuration 对话框,让选择一个默认的Activity,之前默认情况下是直接编译到虚拟机运行的 ...

  4. C#命名管道通信

    C#命名管道通信 最近项目中要用c#进程间通信,以前常见的方法包括RMI.发消息等.但在Windows下面发消息需要有窗口,我们的程序是一个后台运行程序,发消息不试用.RMI又用的太多了,准备用管道通 ...

  5. 为虚拟机搭建MacOSX系统

    发现一篇正确的安装文章,转载自:http://blog.imqyc.com/2013/05/29/vritual-MacOS/ 今年新买了一个笔记本电脑,本打算购入心仪已久的Macbook Pro 1 ...

  6. JUnit使用Eclipse建立Test Suite - 就是爱Java

    当JUnit有多个或所有的Test Case要执行,此时就需要Test Suite来管理众多的Test Case,利用Eclipse的整合开发环境,可以针对多个不相关的Test Case或Test S ...

  7. JAVA入门——Generic/泛型

    在台科大的第二次JAVA作业,老师课上讲的内容是泛型. 泛型(generic),泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以 ...

  8. python练习题_03

    1.写函数: 根据范围获取其中3和7整除的所有数的和,并返回调用者: 符合条件的数字个数以及符合条件的数字的总和,如:def func(start,end): def func(start,end): ...

  9. CMD命令行netsh添加防火墙规则

    1.为e:\f.exe 添加防火墙规则(参考:https://www.cnblogs.com/zhen656/p/4275270.html),需要管理员权限. >netsh advfirewal ...

  10. python的扩展包requests的高级用法

    Python 标准库中的 urllib2 模块提供了你所需要的大多数 HTTP 功能,但是它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最 ...