-
Notifications
You must be signed in to change notification settings - Fork 6.6k
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
34 changed files
with
359 additions
and
214 deletions.
There are no files selected for viewing
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
Large diffs are not rendered by default.
Oops, something went wrong.
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
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 |
|---|---|---|
| @@ -1,73 +1,73 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Hello MUI</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1,maximum-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"> | ||
|
|
||
| <!--标准mui.css--> | ||
| <link rel="stylesheet" href="../css/mui.min.css"> | ||
| <!--App自定义的css--> | ||
| <link rel="stylesheet" type="text/css" href="../css/app.css"/> | ||
| <style type="text/css"> | ||
| p{ | ||
| text-indent: 22px; | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Hello MUI</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1,maximum-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"> | ||
|
|
||
| <!--标准mui.css--> | ||
| <link rel="stylesheet" href="../css/mui.min.css"> | ||
| <!--App自定义的css--> | ||
| <link rel="stylesheet" type="text/css" href="../css/app.css" /> | ||
| <style type="text/css"> | ||
| p { | ||
| text-indent: 22px; | ||
| } | ||
| .des { | ||
| margin: .5em 0; | ||
| } | ||
| .des>li { | ||
| font-size: 14px; | ||
| color: #8f8f94; | ||
| .des { | ||
| margin: .5em 0; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="mui-bar mui-bar-nav"> | ||
| <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> | ||
| <h1 class="mui-title">lazyload（延迟加载） </h1> | ||
| </header> | ||
| <div class="mui-content"> | ||
| <div class="mui-content-padded"> | ||
| <p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p> | ||
| <ul class="des"> | ||
| <li>加快页面渲染速度</li> | ||
| <li>提升页面滚动性能</li> | ||
| <li>默认不下载屏幕外的图片，减少网络流量</li> | ||
| </ul> | ||
| </div> | ||
| <ul id="list" class="mui-table-view mui-table-view-chevron"> | ||
|
|
||
| </ul> | ||
| </div> | ||
| </body> | ||
| <script src="../js/mui.min.js "></script> | ||
| <script src="../js/mui.lazyload.js"></script> | ||
| <script src="../js/mui.lazyload.img.js"></script> | ||
| <script> | ||
| mui.init(); | ||
| var createFragment = function(count) { | ||
| var fragment = document.createDocumentFragment(); | ||
| var li; | ||
| for (var i = 0; i < count; i++) { | ||
| li = document.createElement('li'); | ||
| li.className = 'mui-table-view-cell mui-media'; | ||
| li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/'+(i%5+1)+'.jpg?version='+Math.random()*1000+'"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>'; | ||
| fragment.appendChild(li); | ||
| } | ||
| return fragment; | ||
| }; | ||
| (function($) { | ||
| var list = document.getElementById("list"); | ||
| list.appendChild(createFragment(50)); | ||
| $(document).imageLazyload({ | ||
| placeholder: '../images/60x60.gif' | ||
| }); | ||
| })(mui); | ||
| </script> | ||
|
|
||
| .des>li { | ||
| font-size: 14px; | ||
| color: #8f8f94; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header class="mui-bar mui-bar-nav"> | ||
| <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> | ||
| <h1 class="mui-title">lazyload（延迟加载） </h1> | ||
| </header> | ||
| <div class="mui-content"> | ||
| <div class="mui-content-padded"> | ||
| <p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p> | ||
| <ul class="des"> | ||
| <li>加快页面渲染速度</li> | ||
| <li>提升页面滚动性能</li> | ||
| <li>默认不下载屏幕外的图片，减少网络流量</li> | ||
| </ul> | ||
| </div> | ||
| <ul id="list" class="mui-table-view mui-table-view-chevron"> | ||
|
|
||
| </ul> | ||
| </div> | ||
| </body> | ||
| <script src="../js/mui.min.js "></script> | ||
| <script src="../js/mui.lazyload.js"></script> | ||
| <script src="../js/mui.lazyload.img.js"></script> | ||
| <script> | ||
| mui.init(); | ||
| var createFragment = function(count) { | ||
| var fragment = document.createDocumentFragment(); | ||
| var li; | ||
| for (var i = 0; i < count; i++) { | ||
| li = document.createElement('li'); | ||
| li.className = 'mui-table-view-cell mui-media'; | ||
| li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>'; | ||
| fragment.appendChild(li); | ||
| } | ||
| return fragment; | ||
| }; | ||
| (function($) { | ||
| var list = document.getElementById("list"); | ||
| list.appendChild(createFragment(50)); | ||
| $(document).imageLazyload({ | ||
| placeholder: '../images/60x60.gif' | ||
| }); | ||
| })(mui); | ||
| </script> | ||
|
|
||
| </html> |
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
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
Oops, something went wrong.