jquery.lazyload.js 图片延迟加载
当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的
使用方法也非常简单。
1、在网页任何位置(一般是在</body>前面)加上如下代码(注意<script>引用的两个js文件,路径自行设定):
<script src="js/jquery.min.js"></script>
<script src="js/jquery.lazyload.min"></script>
<script type="text/javascript" charset="utf-8"> $(function() { $("img.lazy").lazyload(); }); </script>
2、图片的html代码<img>标签需要这样写:
<img class="lazy" src="img/jiazai.jpg" data-original="img/1.jpg" width="540" height="960" alt="">
说明:
<img>里加上class="lazy" 是为了更好的控制哪些图片延迟加载
<img>里的src为一张预加载的图片,一般选择小的动态加载效果图片
<img>里的data-original为真正需要显示的图片地址。
<img>里的alt为图片说明文字,在图片还没加载时显示。这个可有可无。
Lazy Load插件其他功能:
参加官网:http://www.appelsiini.net/projects/lazyload
jquery.lazyload.js 图片延迟加载的更多相关文章
- jquery.lazyload.js图片延迟加载
转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下 ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- JQuery LazyLoad实现图片延迟加载-探究
对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- 使用jQuery lazyload 实现图片延迟加载
下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 <div id="imagesCon ...
- 使用jquery插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
随机推荐
- 枚举转SelectList扩展方法
public enum Avbc { Red=1, Blue=2, Whilt=3, Black=4 } public st ...
- java第一周学习总结
学号20145336 <Java程序设计>第1周学习总结 教材学习内容总结 java是sun推出的一门高级编程语言,现已经成为web开发的首选语言.他分为三种技术架构,j2ee针对web应 ...
- 八皇后问题解题报告(dfs
这里是代码传送门 所谓八皇后问题,一开始接触,上学期舍友提及的,但是因为各种原因,水平不够,并没有关心,偶然之间,再次遇见,便进行的尝试(棋盘是0-7的,不是1-8的...开始打弄错了) 所谓八皇后问 ...
- php实现dota天梯、wow竞技场、lol排位赛匹配加分算法ELO
public function marchOpponents() { $rstep = Yii::$app->params['ratingStep'];//(随机范围) $rsN=100; $d ...
- 推荐一个快速了解移植uboot以及linux到新板子上的ppt教程
链接地址在此: https://elinux.org/images/2/2a/Schulz-how-to-support-new-board-u-boot-linux.pdf
- POJ 2051 argus(简单题,堆排序or优先队列)
又是一道数据结构题,使用堆来进行权值调整和排序,每次调整都是o(n)的复杂度,非常高效. 第一眼看题觉得可以用优先队列来做,应该也很简单. 事实上多数优先队列都是通过堆来实现的. 写的时候还是出了一些 ...
- MySQL 常用运算符
1.算数运算符 加 mysql> select 1+2; 减 mysql> select 2-1; 乘 mysql> select 2*3; 除 mysql> select 5 ...
- 使用 docker 搭建开发环境
作为一个 freelancer,经常能够接到很多的开发工作,这些金主,有喜欢 PHP 的,有习惯撒手不管的:有偏好 sqlite 的,也有喜欢 PG 的,我甚至见过 mysql.PG 一起使用的项目: ...
- git pull 分支问题
问题: 是因为本地分支与远程分支没有链接关系, 让他们建立链接关系
- Kubernetes容器运行时(CRI)简介
Kubernetes节点的底层由一个叫做“容器运行时”的软件进行支撑,它负责比如启停容器这样的事情.最广为人知的容器运行时当属Docker,但它不是唯一的.事实上,容器运行时这个领域发展迅速.为了使K ...