图片懒加载之lazyload.js插件使用
简介
lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。
使用
lazyload依赖与jquery。所以先引入jquery和lazyload
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
1.将图片路径写入data-original属性
2.给lazyload的图片增加一个名为lazy的class
3.选择所有要lazyload的图片(img.lazy),执行lazyload();
<img class="lazy" data-original="img/example.jpg" style="margin-top:1000px" height="">
<script>
$(function(){
$("img.lazy").lazyload();
})
</script>
注意:必须设置图片的高度或者宽度,否则插件可能无法正常工作
图片懒加载之lazyload.js插件使用的更多相关文章
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- 带加载进度的Web图片懒加载组件Lazyload
在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- VUE图片懒加载-vue lazyload插件的简单使用
序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- 图片懒加载 jquery.lazyload
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 插件:★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
随机推荐
- UVA11624_Fire!
在一个矩形方阵里面,一个人要从一个位置走向另一个位置,其中某些地方有火源,每过一分钟,火源就会点燃相邻的点,同时相邻的点也变成了火源.人不能通过有火的点.问一个人能够安全地走到目的地去?最短时间多少? ...
- 【Java并发编程】之十三:生产者—消费者模型
生产者消费者问题是线程模型中的经典问题:生产者和消费者在同一时间段内共用同一存储空间,生产者向空间里生产数据,而消费者取走数据. 这里实现如下情况的生产--消费模型: 生产者不断交替地生产两组 ...
- 【大数据】Spark基础解析
第1章 Spark概述 1.1 什么是Spark 1.2 Spark内置模块 Spark Core:实现了Spark的基本功能,包含任务调度.内存管理.错误恢复.与存储系统交互等模块.Spark Co ...
- php的数组转为对象
有时候数组要转为对象操作,用对象的指向操作符,有两种方法 方法一: $arr=['a'=>10,'b'=>100,'c'=>'Hello']; $obj=(Object)$arr; ...
- Statement和PreparedStatement之间的区别
Statement和PreparedStatement之间的区别: 1.PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程2.使用 Statement ...
- Mac上安装mariadb
1.查看mariadb包信息 # brew info mariadb mariadb: stable 10.2.6 (bottled) Drop-in replacement for MySQL ht ...
- %1$s %1$d Android string (java & Android 格式化字符串)
1$s // String%1$d // int //R.string.old:<string name="old">我今年%1$d岁了</string> ...
- Chapter6(函数) --C++Prime笔记
1.重载函数,也就是说一个名字可以对应几个不同的函数. 2.内置类型的未初始化局部变量将产生未定义的值. 3.局部静态对象在程序执行路径第一次进过对象定义语句时初始化,并且直到程序终止才被销毁. 内置 ...
- 左值与右值,左值引用与右值引用(C++11)
右值引用是解决语义支持提出的 这篇文章要介绍的内容和标题一致,关于C++ 11中的这几个特性网上介绍的文章很多,看了一些之后想把几个比较关键的点总结记录一下,文章比较长.给出了很多代码示例,都是编译运 ...
- C++中基于成员函数是否是const重载成员函数
C++pimer中文版第四版 378页 基于const的重载 如果我们要在一个类的成员函数中定义两个函数签名完全一样的成员函数,比如display,那么可以基于是否是const成员函数来重载.比如: ...