文档章节

关于lazyload插件的使用

暴走的土豆
 暴走的土豆
发布于 2016/11/14 15:08
字数 252
阅读 10
收藏 0

[插件地址]http://www.appelsiini.net/projects/lazyload

[参考资料]http://www.w3cways.com/1765.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
</head>
<body>
<section>
    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

    <img class="lazy" width="320" height="320" data-original="img/map.png">

</section>

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

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

<script>

$(function(){

     $(".lazy").lazyload({

     effect:"fadeIn"

 });

});  

</script>

</body>

</html>`

注意: 1.给每张图片设置宽高。 2.js引用的顺序。

© 著作权归作者所有

暴走的土豆
粉丝 1
博文 5
码字总数 2404
作品 0
成都
前端工程师
私信 提问
scrollLoad_MingGe 2.52 更新,滚动加载插件

2.52升级内容:加入container容器操作,这个功能在2.52的时候忘记了,修复各种事件机制,以及各种优化修复等 MingGe.scrollLoad2.52插件运行速度非常快, demo.html演试采用的大量图片以瀑布...

明哥先生
2016/01/11
1K
5
jquery lazy load

LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。 如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在前。 你必须改变图片的标签,图片的...

张子浩
2018/08/20
0
0
jQuery.lazyload详解

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="http://file.ithome.com/js/jquery.lazyload.js"></script>   jQuery实现图片延迟加载,不知道是......

地球家园
2014/03/05
128
0
懒加载的实现以及优化(函数节流)

var throttle = function (fn, interval){ var _self = fn, timer, firstTime = true; return function(){ var args = arguments, _me = this; if(firstTime){ self.apply(me, args); return......

西园里的猫
04/12
9
0
18、vue-lazyload实现图片懒加载

前言:GitHub:https://github.com/Ewall1106/mall(请选择分支18) 1、安装 vue-lazyload官网:https://github.com/hilongjw/vue-lazyload 2、main.js中引入 (1)引入并注册vue-lazyload ......

Ewall_
2018/07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
今天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部