分享一个延迟加载图片的JS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="yanchi.js"></script>
<script>
$(function () {
var yanchi = new YanChi();
yanchi.init("img", 0);
yanchi.range = 100;
yanchi.callback(function (img, imgs) {
img = $(img);
if (img.data("src")) {
img.attr("src", img.data("src")); }
});
}) </script>
</head>
<body>
<p style="height:800px"></p><img src="" data-src="http://static.cnblogs.com/images/adminlogo.gif" /><p style="height:400px"></p>
</html>
本人自己写的
1、初始化
最少提供一个参数
yanchi.init("img", 0); //img,提前0PX加载
yanchi.init("img", 100,"data-url");//所有图片，提前100 px加载，图片地址在data-url这个属性上
也可以这们初始化：
var yanchi = new YanChi();
yanchi.init("img");
yanchi.range=300;
yanchi.attrName="data-url";
只要设置了attrName属性,这样就可以用了
//////////////////////////////
如果你的图片地址在背景，或要设置图片CSS样式，上面的方法显然不行了，那样就无法满足你的要求了。
那么，就要自定义回调函数
拓展：定义回调
定义，滚动条到达的时候的事件
var yanchi = new YanChi();
yanchi.init("img");
yanchi.range=300;
yanchi.callback(function (img, imgs) {
if (img.data("background")) {
img.css("background", img.data("background"));
}
}）
callback 这个函数注入了img,imgs两个变量。img是当前的图片
////////////////////////////////
随便写写的
如果lazyload无法满足你的需求，欢迎使用这个。兼容lazyload。
欢迎朋友们提出更好的建议~
下载http://files.cnblogs.com/files/hhkedang/yanchi.js
分享一个延迟加载图片的JS的更多相关文章
- 为大家分享一个 Ajax Loading —— spin.js
我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以 ...
- 为大家分享一个 Ajax Loading —— spin.js（转）
原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...
- 分享一个react 图片上传组件 支持OSS 七牛云
react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...
- 分享一个tom大叔的js 深入理解系列 (有助于提升)
http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#3620172
- 延迟加载图片的 jQuery 插件：Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...
- Lazyr.js – 延迟加载图片（Lazy Loading）
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 延迟加载图片插件LazyLoad.js的使用方法
我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
随机推荐
- 《Linux内核设计与实现》读书笔记 第一、二章
第一章 Linux内核简介 1.1Unix历史 Unix特点:1.很简洁 2.所有东西都被当成文件对待 3.Unix内核和相关的系统工具软件都是用C语言编写而成 4.进程创建非常迅速 所以Uni ...
- linux vps安装kloxo配置全部过程
第一步如何登录Linux VPS进行远程(SSH)管理 很多人可能用过免费虚拟主机,但绝没有用过好用的免费服务器租用,仅有的少数免费服务器都只针对有较高访问量的大站(以交换广告为条件),而普通小站是无 ...
- ssh的原理和流程
一.strtus:第1步:把上面的jar包下载完成后,先在eclipse中新建一个web工程,新建工程的同时最好选上创建的同时添加web.xml文件 第2步:找到下载并解压好的strtus文件中找到a ...
- HDU 5965 枚举模拟 + dp(?)
ccpc合肥站的重现...一看就觉得是dp 然后强行搞出来一个转移方程 即 根据第i-1列的需求和i-1 i-2列的枚举摆放 可以得出i列摆放的种类..加了n多if语句...最后感觉怎么都能过了..然 ...
- C#拾遗-接口与抽象类
抽象类中可以有构造函数(无参构造函数和有参构造函数)无参构造函数在子类实例化时被调用有参构造函数必须显示调用 抽象类中可以有抽象方法 但是不能有方法体,子类必须实现抽象方法子类必须重写抽象类中的抽象方 ...
- Ubuntu下的PHP开发环境架设
Ubuntu下的PHP开发环境架设 今天重新装了ubuntu那么就吧过程记录下. 打开终端,也就是命令提示符. 我们先来最小化组建安装,按照自己的需求一步一步装其他扩展.命令提示符输入如下命令: ...
- 然并卵，腾讯QQ认证空间又再次关闭申请
昨天发布的腾讯QQ认证空间又开放申请的消息,此消息一放出,大家都去关注认证的事情,而马浩周发现在4月27日下午4-5点,腾讯QQ空间认证又再次关闭页面开放申请的通知,变成了以前停止审核的通知了. 可能 ...
- 【jmeter】接口稳定性测试
1.创建进行测试的脚本 2.场景设置 线程组设置并发用户数30 在启动1s,30并发用户全部启动 循环设置为永远 采用调度器:有两种工作方式 1.设置启动和结束时间 2.设置持续时间,我设置的是60s ...
- 视觉机器学习笔记------CNN学习
卷积神经网络是第一个被成功训练的多层神经网络结构,具有较强的容错.自学习及并行处理能力. 一.基本原理 1.CNN算法思想 卷积神经网络可以看作为前馈网络的特例,主要在网络结构上对前馈网络进行简化和改 ...
- struts2所有组件
struts2所有组件(动作,结果,拦截器) 动作在框架中可作为MVC模式的模型.这个角色的主要职责是控制业务逻辑,动作使用execute()方法来实现这个功能. 这个方法中的代码应该只关注与请求相关 ...