jquery.lazyload 使用
1、引用js
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
2、需要加载的图片写成以下的形式:
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
或者: <img class="lazy" data-original="img/example.jpg" src="/Content/images/home/nopic_shop.png" width="640" height="480"> 最下面的是有默认图的。建议用下面的
3、在要加载的页面,加上js
$(function() {
$("img.lazy").lazyload();
});
我一般使用下面有效果的模式:
//加载图片
$("img.lazy").lazyload({
effect: "fadeIn"
});
更多需求文档,请参考官方的介绍:
http://www.appelsiini.net/projects/lazyload
jquery.lazyload 使用的更多相关文章
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload
Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload使用及源码分析
前言: 貌似以前自己也写过图片懒加载插件,但是新公司使用的是jQuery.lazyload插件,为了更好的运用,自己还是把源码看了遍,分别记录了如何使用, 插件原理,各个配置属性的完整解释,demo实 ...
- jQuery.lazyload详解
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js
引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.lazyload.j ...
随机推荐
- guzzle http异步 post
use GuzzleHttp\Pool;use GuzzleHttp\Client;//use GuzzleHttp\Psr7\Request;use Psr\Http\Message\Respons ...
- php strpos(), stripos(),strrpos(), strripos()的区别
strpos(), 左边开始,字符出现第一个位置,区分大小写: stripos(),不区分大小写: strrpos(), 左边开始,字符出现,最后一个位置,区分大小写: strripos()不区分大小 ...
- vscode 修改(自定义)插件的快捷键
简单的使用了一下vscode,已经感受到了它的强大. 修改插件的快捷键: 1.快捷键command+k 按完之后再按command+s,弹出一个快捷键列表(code->首选项->键盘快捷方 ...
- 自定义vue全局组件use使用
自定义一个全局Loading组件,并使用:总结目录:|-components |-loading |-index.js 导出组件,并且install |-loading.vue 定义Loading组件 ...
- 2-2 vue环境搭建以及vue-cli使用
一.vue多页面应用文件引用 1.官网拷贝: <script src="https://cdn.jsdelivr.net/npm/vue"></script> ...
- 安装Windows Server 2012 R2提示"unable to create a new system partition or locate an existing system partition"解决方法
重新安装Windows Server 2012 R2,把原来SSD分区全部格式化重建,用U盘启动安装时提示如下: "Setup was unable to create a new syst ...
- 使用正则表达式来截取nginx中的内置变量
nginx 中的内置变量都可以通过 if 指令 + 正则表达式来进行截取,截取之后的结果通过正则表达式的分组来进行引用 比如:从请求中传过来的一个名为 ssl_client_s_dn 的变量,它的值是 ...
- 常用linux命令及shell脚本
参考:Linux命令大全 分割大文件 Split命令 按行分割(只能是文本文件) $split -l 1000 big_file 前缀 按文件大小分割 $split -b 64m big_file 前 ...
- oracle fm格式化
select to_char(0.56,'FM999,999,990.00' ) from dual 其中 9代表如果存在数字则显示数字,不存在显示空格 其中 0代表如果存在数字则显示数字,不存在则显 ...
- 慕课学习--DNS的作用
因为相对于32位的IP地址,人对域名更加敏感,也更容易记忆.所以一般都是把IP地址转化为域名进行网页的访问. DNS(Domain Name System,域名系统),万维网上作为域名和IP地址相互映 ...