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 ... 
随机推荐
- Android studio 怎么使用已经下载好的Android SDK ?
			AS:3.1.2 ---> android-studio-ide-173.4720617-windows32.zip sdK: gradle:4.4 1. 2. 3. 4. 5. 下面重要一步, ... 
- 使用gdb调试theos tweak插件
			查看设备日志tail -f /var/log/syslog或者 Mobilesubstrate injects your dylib into the target process. Debuggin ... 
- sencha touch  tpl 实现按钮功能
			js如下: Ext.define('app.view.message.Info', { alternateClassName: 'messageInfo', extend: 'Ext.Containe ... 
- powerDesigner根据sql脚本来逆向生成pdm等模型
			一.问题概述 网上一般的博文都是说要建立数据源的方式来逆向或者正向. 我这人比较懒得折腾,更喜欢通过sql脚本的方式来做. 二.步骤 File-->New Model--> 然后: 注意上 ... 
- Java秒杀简单设计一:搭建springboot环境
			项目参考:慕课网 https://www.imooc.com/learn/587 Java秒杀 开发环境 JDK1.8.Maven.Mysql.Eclipse.SpringBoot2.0.5.myb ... 
- jQuery 核心 - noConflict() 方法
			1.遇到问题: 当我们写jquery时使用$,发现写的jquery全部失效: 2.发现问题: 排查后发现是noConflict()函数在作怪,因为使用noConflict()函数后,重新定义$名字为j ... 
- 防EasyUI中登录按钮
			之前系统中是用easyui做的,可能在提示"请输入密码"这几个字时,就变成了点了,让我很... 于时还是找了很多,总算还是让我找到了,不会表达就来源码吧 <style typ ... 
- Git 使用篇一:初步使用GitHub,下载安装git,并上传项目
			首先在MAC上怎么操作. 在gitHub创立一个账户,在创立一个项目,这就不用我说了对吧. 创建完之后是这样的: 接下来,我们打开https://brew.sh 这是下载homebrew的网站,hom ... 
- 安装支持eigen线性迭代的ceres_solver
			Ceres可以求解以下形式的有界约束非线性最小二乘问题: 这种形式的问题来源于科学工程的多个领域,从统计学的曲线拟合到计算机视觉中从图像中构建三维模型. 最近在做sfm方面的重建问题,需要对得到的相机 ... 
- 蓝桥杯 - 数字排列(今有7对数字) - [两种不同的DFS思路]
			今有7对数字:两个1,两个2,两个3,...两个7,把它们排成一行.要求,两个1间有1个其它数字,两个2间有2个其它数字,以此类推,两个7之间有7个其它数字.如下就是一个符合要求的排列: 171264 ... 
