<!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的更多相关文章

  1. 为大家分享一个 Ajax Loading —— spin.js

    我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 今天在网上发现了一个 Spin.js ,该 js 脚本压缩后5k,可以 ...

  2. 为大家分享一个 Ajax Loading —— spin.js（转）

    原文地址:http://www.cnblogs.com/lxblog/p/3425599.html 我们在做Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Load ...

  3. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...

  4. 分享一个tom大叔的js 深入理解系列 (有助于提升)

    http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#3620172

  5. 延迟加载图片的 jQuery 插件：Lazy Load

    网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...

  6. Lazyr.js – 延迟加载图片（Lazy Loading）

    Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示    ...

  7. 延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  8. 延迟加载图片插件LazyLoad.js的使用方法

    我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...

  9. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

随机推荐

  1. Javascript初学篇章_1（概念/数据类型）

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  2. hihoCoder 1183 连通性一·割边与割点（Tarjan求割点与割边）

    #1183 : 连通性一·割边与割点 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 还记得上次小Hi和小Ho学校被黑客攻击的事情么,那一次攻击最后造成了学校网络数据的丢 ...

  3. [转载] 自定义百度网盘分享密码 (Javascript)

    压缩版 javascript:require(["function-widget-1:share/util/service/createLinkShare.js"]).protot ...

  4. LWL-Hitokoto API（一言-纯净API）

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:liwanglin12链接:https://blog.lwl12.com/read/hitokoto-api.html来源:L ...

  5. Rails--抛出异常

    begin ... rescue Exception => e ... end

  6. [lua大坑]一个莫名其妙的lua执行时崩溃引出的堆栈大小问题

    这是一个坑,天坑!如果不是我随手删除了一个本地变量,这个问题直到现在我应该也没有头绪. 首先,写了一个新的lua脚本,载入,执行.在执行的时候,出了这么一个莫名其妙的问题: EXC_BAD_ACCES ...

  7. InnoDB杂记

    一.InnoDB写数据流程(猜想) myisam是将索引放入内存缓存(Key Cache,大小有key_buffer_size设置) innodb时间索引和数据文件都放入内存缓存池(Buffer Po ...

  8. 利用JS生成01010101……长度可控的序列

    function ab(d){ var a = []; var x = 1 ; for (var i = 0; i < d; i++) { if (x == 0) { x = x + 1; } ...

  9. 基于fab自动化部署

    fab是一个python库,强大好使,可以做很多帮助你减轻工作量的事情,比如在多台服务器上部署web项目,这里就讲讲使用它简单的方法来执行部署的过程. 关于fab的安装的基本使用,网上一搜一大把,内容 ...

  10. Bypass WAF Cookbook

    PS.之前一直想把零零碎碎的知识整理下来,作为知识沉淀下来,正好借着wooyun峰会的机会将之前的流程又梳理了一遍,于是就有了下文.也希望整理的内容能给甲方工作者或则白帽子带来一些收获. 0x00 概 ...