js插件---图片懒加载lazyload
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的更多相关文章
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
- 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- [js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- 图片懒加载lazyload.js详解
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...
- Js 之图片懒加载插件
一.PC端(lazyload) 1.引入js文件 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.m ...
- 图片懒加载--lazyload.js的用法
这几天公司的项目已经完成的差不多了,只剩下各种优化问题.今天着重于图片加载的优化.当一个页面需要下拉很长而且又有过多的图片要加载时,就会发生很多http请求,就会拉慢网页加载速度,用户体验不友好.怎么 ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
随机推荐
- [USACO4.1]篱笆回路Fence Loops
题目:USACO Training 4.1(在官网上提交需加文件输入输出).洛谷P2738. 题目大意:给你一张图里的边集,让你求出这张图的最小环. 解题思路:求最小环很简单,用Floyd即可.最重要 ...
- java redistemplate
//添加一个 key ValueOperations<String, Object> value = redisTemplate.opsForValue(); value.set(&quo ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- POJ——T3259 Wormholes
http://poj.org/problem?id=3259 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 50692 ...
- ，典型递归问题-F(1025）mod 5 的值
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- 双系统给ubuntu增加分区
http://www.th7.cn/system/lin/201506/106338.shtml http://www.linuxidc.com/Linux/2012-06/61983.htm 因为本 ...
- 英语影视台词---六、Saving Private Ryan Quotes
英语影视台词---六.Saving Private Ryan Quotes 一.总结 一句话总结: Saving Private Ryan is a 1998 American epic war fi ...
- Thinkphp5.0怎么加载css和js
Thinkphp5.0怎么加载css和js 问题 http://localhost/手册上的那个{load href="/static/css/style.css" /} 读取不到 ...
- Autofac依赖注入框架
最近使用Autofac框架做项目的依赖注入,感觉挺好用的. 没有深入研究,只是拿来用用,具体可以去官网看看:https://autofac.org/. 这里只是贴一下最近项目的配置: public p ...
- 36.创建模板mylist
node.h #pragma once //创建模板 template <class T> class Node { public: T t;//数据 Node *pNext;//指针域 ...