-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
195 changed files
with
39,001 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,301 @@ | ||
| <!DOCTYPE HTML> | ||
| <html lang="en" > | ||
|
|
||
| <head> | ||
|
|
||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <title>API | 新版 lib-img 库</title> | ||
| <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> | ||
| <meta name="description" content=""> | ||
| <meta name="generator" content="GitBook 2.6.7"> | ||
|
|
||
|
|
||
| <meta name="HandheldFriendly" content="true"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> | ||
| <meta name="apple-mobile-web-app-capable" content="yes"> | ||
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> | ||
| <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png"> | ||
| <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon"> | ||
|
|
||
| <link rel="stylesheet" href="gitbook/style.css"> | ||
|
|
||
|
|
||
| <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-highlight/website.css"> | ||
|
|
||
|
|
||
|
|
||
| <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-search/search.css"> | ||
|
|
||
|
|
||
|
|
||
| <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-fontsettings/website.css"> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| <link rel="next" href="./Other.html" /> | ||
|
|
||
|
|
||
| <link rel="prev" href="./QuickStart.html" /> | ||
|
|
||
|
|
||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
| <div class="book" | ||
| data-level="1.1" | ||
| data-chapter-title="API" | ||
| data-filepath="APIReference.md" | ||
| data-basepath="." | ||
| data-revision="Fri Jan 29 2016 17:02:00 GMT+0800 (CST)" | ||
| data-innerlanguage=""> | ||
|
|
||
|
|
||
| <div class="book-summary"> | ||
| <nav role="navigation"> | ||
| <ul class="summary"> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| <li class="chapter " data-level="0" data-path="index.html"> | ||
|
|
||
|
|
||
| <a href="./index.html"> | ||
|
|
||
| <i class="fa fa-check"></i> | ||
|
|
||
| 图片库 | ||
| </a> | ||
|
|
||
|
|
||
| </li> | ||
|
|
||
| <li class="chapter " data-level="1" data-path="QuickStart.html"> | ||
|
|
||
|
|
||
| <a href="./QuickStart.html"> | ||
|
|
||
| <i class="fa fa-check"></i> | ||
|
|
||
| <b>1.</b> | ||
|
|
||
| 快速教程 | ||
| </a> | ||
|
|
||
|
|
||
| <ul class="articles"> | ||
|
|
||
|
|
||
| <li class="chapter active" data-level="1.1" data-path="APIReference.html"> | ||
|
|
||
|
|
||
| <a href="./APIReference.html"> | ||
|
|
||
| <i class="fa fa-check"></i> | ||
|
|
||
| <b>1.1.</b> | ||
|
|
||
| API | ||
| </a> | ||
|
|
||
|
|
||
| </li> | ||
|
|
||
| <li class="chapter " data-level="1.2" data-path="Other.html"> | ||
|
|
||
|
|
||
| <a href="./Other.html"> | ||
|
|
||
| <i class="fa fa-check"></i> | ||
|
|
||
| <b>1.2.</b> | ||
|
|
||
| 其他问题 | ||
| </a> | ||
|
|
||
|
|
||
| </li> | ||
|
|
||
| <li class="chapter " data-level="1.3" data-path="CHANGELOG.html"> | ||
|
|
||
|
|
||
| <a href="./CHANGELOG.html"> | ||
|
|
||
| <i class="fa fa-check"></i> | ||
|
|
||
| <b>1.3.</b> | ||
|
|
||
| 更新列表 | ||
| </a> | ||
|
|
||
|
|
||
| </li> | ||
|
|
||
|
|
||
| </ul> | ||
|
|
||
| </li> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| <li class="divider"></li> | ||
| <li> | ||
| <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> | ||
| Published with GitBook | ||
| </a> | ||
| </li> | ||
|
|
||
| </ul> | ||
| </nav> | ||
| </div> | ||
|
|
||
| <div class="book-body"> | ||
| <div class="body-inner"> | ||
| <div class="book-header" role="navigation"> | ||
| <!-- Actions Left --> | ||
|
|
||
|
|
||
| <!-- Title --> | ||
| <h1> | ||
| <i class="fa fa-circle-o-notch fa-spin"></i> | ||
| <a href="./" >新版 lib-img 库</a> | ||
| </h1> | ||
| </div> | ||
|
|
||
| <div class="page-wrapper" tabindex="-1" role="main"> | ||
| <div class="page-inner"> | ||
|
|
||
|
|
||
| <section class="normal" id="section-"> | ||
|
|
||
| <h1 id="apis">APIS</h1> | ||
| <h2 id="libimgsetconfigconfig">lib.img.setConfig(config)</h2> | ||
| <p>修改默认配置, 支持的配置项及其默认值如下</p> | ||
| <pre><code>var config = { | ||
| defaultAttr: { | ||
| 'width': 400, //宽度 | ||
| 'height': 400, //高度 | ||
| 'qNormal': 'q50', //强网质量 | ||
| 'qWeak': 'q30', // 弱网质量 | ||
| 'sharpen': 's150', //锐化参数 | ||
| 'type': 'square', //裁剪类型 | ||
| 'original': false //仅仅收敛CDN域名, 不添加任何质量控制后缀 | ||
| 'lazy': true, //懒加载开关 | ||
| }, | ||
| 'autoSize': true, //启用自动尺寸: 若未通过元素attibute指定大小, 则获取坑位大小; 禁用自动尺寸: 若未通过元素attibute指定大小, 则采用defaultAttr中指定的大小; | ||
| 'dataSrc': 'img-src', //指定图片地址的attribute名, 兼做lazy-class的作用 | ||
| 'lazyHeight': 0, //以此高度提前触发懒加载 | ||
| 'lazyWidth': 0, //以此宽度提前触发懒加载 | ||
| 'baseDpr': 2, //指定尺寸的基础dpr | ||
| 'filterDomains': ['a.tbcdn.cn', 'assets.alicdn.com', 'wwc.taobaocdn.com', 'wwc.alicdn.com'] //自定义过滤的域名命令，适用于不能收敛的域名url | ||
| }; | ||
| </code></pre><ul> | ||
| <li>和单个图片强相关的属性默认值写在 defaultAttr 中,可以被元素的 attribute 覆盖</li> | ||
| <li>外层字段是全局的配置,对所有图片生效,不能被 attribute 覆盖</li> | ||
| </ul> | ||
| <h2 id="libimgfire">lib.img.fire()</h2> | ||
| <p>重新遍历懒加载图片，绑定懒加载, 处理 CDN 后缀. 此方法可以被多次调用,对同一个元素不会处理多次 </p> | ||
| <h2 id="libimglogconfig">lib.img.logConfig()</h2> | ||
| <p>在 console 中打出当前的配置, 供 debug 使用</p> | ||
| <h2 id="使用范例">使用范例</h2> | ||
| <pre><code> <style> | ||
| .my-img { | ||
| display: block; | ||
| margin-bottom: 10px; | ||
| width: 5.33rem; | ||
| height: 4rem; | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <!--AutoSize 特性 仅需通过css指定坑位大小即可 --> | ||
| <img class="my-img" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg"> | ||
|
|
||
| <!-- 最一般的调用方式 指定宽高 --> | ||
| <img class="my-img" data-width="400" data-height="300" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg"> | ||
|
|
||
| <!-- 通过attribute 重载defaultAttr中的其他属性 --> | ||
| <img class="my-img" data-lazy="false" data-q-weak="q90" data-width="400" data-height="300" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg"> | ||
| <img class="my-img" data-original="true" img-src="http://gw.alicdn.com/tfscom/TB1hScdIFXXXXX7aXXXlQjeFXXX-1024-769.jpg"> | ||
|
|
||
| <script> | ||
| function test() { | ||
|
|
||
| //无需实例化, 若无需对默认设置做定制, 仅调用 lib.img.fire() 即可 | ||
| lib.img.setConfig({ | ||
| baseDpr: 2, | ||
| autoSize: true, | ||
| defaultAttr: { | ||
| qNormal: 'q90', | ||
| qWeak: 'q60' | ||
| } | ||
| }); | ||
|
|
||
| //在此处插入了一些图片dom | ||
|
|
||
| lib.img.fire(); | ||
| } | ||
| window.setTimeout(test, 500) | ||
|
|
||
| </script> | ||
| </code></pre> | ||
|
|
||
| </section> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <a href="./QuickStart.html" class="navigation navigation-prev " aria-label="Previous page: 快速教程"><i class="fa fa-angle-left"></i></a> | ||
|
|
||
|
|
||
| <a href="./Other.html" class="navigation navigation-next " aria-label="Next page: 其他问题"><i class="fa fa-angle-right"></i></a> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <script src="gitbook/app.js"></script> | ||
|
|
||
|
|
||
| <script src="gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script> | ||
|
|
||
|
|
||
|
|
||
| <script src="gitbook/plugins/gitbook-plugin-search/search.js"></script> | ||
|
|
||
|
|
||
|
|
||
| <script src="gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script> | ||
|
|
||
|
|
||
|
|
||
| <script src="gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script> | ||
|
|
||
|
|
||
| <script> | ||
| require(["gitbook"], function(gitbook) { | ||
| var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}}; | ||
| gitbook.start(config); | ||
| }); | ||
| </script> | ||
|
|
||
|
|
||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.