分享一个延迟加载图片的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,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
随机推荐
- Javascript初学篇章_3(注释/if/switch)
五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...
- 谢欣伦 - OpenDev原创教程 - 客户端套接字类CxClientSocket
这是一个精练的客户端套接字类,类名.函数名和变量名均采用匈牙利命名法.小写的x代表我的姓氏首字母(谢欣伦),个人习惯而已,如有雷同,纯属巧合. CxClientSocket的使用如下(以某个叫做CSo ...
- Struts2 OGNL 自动转换Date类型的一些注意事项
Strut2 有比较完善的使用OGNL的jsp标签自动转化为对应的后台对象的功能. 这里java.util.Date的自动转化有一些需要注意的地方(局部转换): 1.必须要在struts的xml文件中 ...
- poj2488骑士马走
#include<stdio.h> #include<stdlib.h> int data[100][100] = {0}; int Dx[8] = {-1,1,-2,2,-2 ...
- Sourceinsight最佳配色方案及颜色字体调整方法
在Ubuntu下面用Gedit有一款比较好看的配色,应该是Darkblue.按照那个样子在SI里面做了一个差不多的,按个人喜好,背景色换成黑色,如下所示: 配色的方案文件可以从此处链接免费下载: 配色 ...
- iOS开发UI篇—iPad和iPhone开发的比较
一.iPad简介 1.什么是iPad 一款苹果公司于2010年发布的平板电脑 定位介于苹果的智能手机iPhone和笔记本电脑产品之间 跟iPhone一样,搭载的是iOS操作系统 2.iPad的市场情况 ...
- 基于ssh框架开发的购物系统的质量属性
根据前面的博客,我们已经大致了解了ssh架构开发整体概念:Struts是一个实现了MVC模式的经典的框架:Hibernate是轻量级Java EE应用的持久层解决方案,以面向对象的方式提供了持久化类到 ...
- 使用POWERDESIGNER设计数据库的20条技巧（转）
1.PowerDesigner使用MySQL的auto_increment ◇问题描述: PD怎样能使主键id使用MySQL的auto_increment呢? ◇解决方法: 打开table prope ...
- wordpres 自定义comment样式
http://wange.im/diy-wordpress-comment-style.html function mytheme_comment($comment, $args, $depth) { ...
- Runtime实战之定制TabBarItem大小
方案一:UIEdgeInsets 适用场景: 适合APP的TabBarItemImage的图片资源放在本地 图片超出tabbar的高度,需移动其位置,来进行适应 弊端: 若在本地配置好后,tabbar ...