分享一个延迟加载图片的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,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...
随机推荐
- 重学ps_1
1,选取 打开图片->点击选取工具->ctrl+c->ctrl+n->ctrl+v 2,去除图片背景 打开你要去除背景的图片->在图层面板中->双击图层把图层改为0 ...
- dede判断当前文章
<li><a href="/info/info3.html" class=s >企业文化 </a></li><li> ...
- mmysql-最大链接数和最大并发数的区别
关于连接数和并发数的设置(针对Innodb引擎) 对于机器本身来说,进程数是说机器正在运行的进程数量,调出任务管理器就可以看到.连接数是指进程接收和发送数据的连接ip的数量.并发数是指进程同时发送数据 ...
- vb6保存项目到c盘的安装目录
工程保存在安装目录("C:\Program Files (x86)\Microsoft Visual Studio\VB98\errhandler1.vbp")里. 文件管理器找不 ...
- Apache Storm源码阅读笔记
欢迎转载,转载请注明出处. 楔子 自从建了Spark交流的QQ群之后,热情加入的同学不少,大家不仅对Spark很热衷对于Storm也是充满好奇.大家都提到一个问题就是有关storm内部实现机理的资料比 ...
- Vmware安装Centos NAT方式设置静态IP
[Vmware中在搭建集群环境等,DHCP自动获取IP方式不方便,为了固定IP减少频繁更改配置信息,建议使用静态IP来配置,网络连接主要有三种方式 1.nat 2.桥接,3主机模式 ,在这里主要介NA ...
- How to install starDIct on suse OS?
1. Access page http://code.google.com/p/stardict-3/ to download starDict package or use zypper in to ...
- win7 WindowsImageBackup 无法识别
控制面板\所有控制面板项\备份和还原
- Quartz2D 编程指南(二)变换、图案、阴影
概览 图形上下文 路径 颜色与颜色空间 变换 图案 阴影 渐变 透明层 Quartz 2D 中的数据管理 位图与图像遮罩 CoreGraphics 绘制 Layer 5.变换 简介 Quartz 2D ...
- LeetCode Moving Average from Data Stream
原题链接在这里:https://leetcode.com/problems/moving-average-from-data-stream/ 题目: Given a stream of integer ...