OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

Image Lazy Load:那些延时加载图片的开源插件(jQuery)


分享到
分类 JS开源   关键字 开源   发布 kris  1429360339972
注意 转载须保留原文链接,译文链接,作者译者等信息。  
图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用,如果不加处理的话会对服务器和带宽造成级大压力,通过只渲染当前用户可见区域的图片,可以极大地减少网站的请求数,降低网络带宽资源。

unveil


这是一款十分轻量级的片时图片加载组件

支持现代浏览器及IE7+, Github上面有将近3K个star(关注)

使用

一般图片

<img src="bg.png" data-src="img1.jpg" /> 

对于支持 retina (视网膜屏幕) 设备

<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> 


应用

$(document).ready(function() {
  $("img").unveil();
});

支持回调

$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});

支持手动触发

$("img").trigger("unveil");


jquery_lazyload



可以延时加载大型网站的图片,当滚动到区域时再进行渲染。Github上面有4K个关注。


使用


引用jQuery和lazyload.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

需要延时加载的图片

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

应用

$(function() {
    $("img.lazy").lazyload();
});


echo


一个独立徽型JavaScript图片延时加载库。不依赖jQuery,压缩后仅2K。


支持IE8+


使用


<body>

  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">

  <script src="dist/echo.js"></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, 'has been', op + 'ed')
    }
  });

  // echo.render(); //手动触发调用
  </script>
</body>

layzr.js


前几天刚刚发布的一款Image Lazy Loading组件,小,快,无依赖(不依赖jQuery),同样支持retina设备。

<script src="layzr.min.js"></script>
<img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image">

<script>
var layzr = new Layzr({
 attr: 'data-layzr',
 retinaAttr: 'data-layzr-retina',
 threshold: 0,
 callback: null
});
</script>


更新


那么,如何让服务器端将一堆HTML中的img转变成data-src呢?其实很简单,几行正则就可以了,比如在node.js中可以这样将img的src转换成data-src(可直接按F12在浏览器的Console中运行)


var html = '包含 <img src="http://ourjs.com/img/weixin.jpg"> 的HTML'

html = html.replace(/<img[^>]+>/g, function(imgstr, idx) {
imgstr = imgstr.replace(' src=', ' data-src=')
return imgstr
})

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  2. 6款基于Node.JS的开源内容管理和静态网站生成系统
  3. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目
  4. 2015年度开发者调查:JS最流行;ObjC工资最高;最想学Android
  5. Session劫持与Session-ID的安全长度
  6. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  7. 编写高性能HTML网页应用
  8. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  9. 使用Node.JS监听文件夹变化
  10. 我为什么不再用Compass写CSS(缺点分析)
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目
  2. 6款基于Node.JS的开源内容管理和静态网站生成系统
  3. trim-html:NodeJS的HTML文本截取库(自动生成正文摘要)
  4. history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
  5. 使用Node.JS监听文件夹变化
  6. 服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)
  7. Oracle发布官方版Node.JS数据库驱动
  8. 用JavaScript实现的Flash VM播放器(虚拟机)
  9. Chartist.js:一个开源的响应式前端矢量(SVG)图表库
  10. JavaScript中数学运算的安全范围及开源大整数高精度计算库

 关键字 - 开源
  1. Node.JS与USB接口通信:检测U盘/移动硬盘插拔事件和发送接数据
  2. Mongoose学习参考文档——基础篇
  3. 一个程序员是如何搞挂NPM和Node社区的
  4. 15个最好用的Node.JS后端框架
  5. 迫于社区压力:React(Native)16将更换成MIT开源协议
  6. 开源Node.js商城:基于Thinkjs+Mysql的开源微信小程序商城
  7. 使用NodeJS搭建邮件自动发送服务器
  8. NodeJS 文件(夹)压缩/解压方案(zip/unzip)-Linux上zip相关命令
  9. QRCode:用纯JavaScript实现的微信二维码图片生成器
  10. Stop-Server:用手机关闭你的电脑

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号