手机端web（flexible.js）预加载与懒加载（自阅）

width: viewport 的宽度 （范围从 200 到 10,000 ，默认为 980 像素 ）

height: viewport 的高度 （范围从 223 到 10,000 ）

initial-scale: 初始的缩放比例 （范围从>0到 10 ）

minimum-scale: 允许用户缩放到的最小比例

maximum-scale: 允许用户缩放到的最大比例

user-scalable: 用户是否可以手动缩放

<meta name="apple-touch-fullscreen" content="yes">  添加到主屏幕后，全屏显示。

<meta name="apple-mobile-web-app-capable" content="yes" />

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

一、淘宝的flexible 源码

flexible.js

;( function(win, lib) {

var doc = win. document;

var docEl = doc.documentElement;

var metaEl = doc. querySelector( 'meta[name="viewport"]');

var flexibleEl = doc. querySelector( 'meta[name="flexible"]');

var dpr = 0;

var scale = 0;

var tid;

var flexible = lib. flexible || ( lib. flexible = {});

if ( metaEl) {

console. warn( '将根据已有的meta标签来设置缩放比例');

var match = metaEl. getAttribute( 'content'). match( /initial \- scale=( [\d\.] + )/);

if ( match) {

scale = parseFloat( match[ 1]);

dpr = parseInt( 1 / scale);

}

} else if ( flexibleEl) {

var content = flexibleEl. getAttribute( 'content');

if ( content) {

var initialDpr = content. match( /initial \- dpr=( [\d\.] + )/);

var maximumDpr = content. match( /maximum \- dpr=( [\d\.] + )/);

if ( initialDpr) {

dpr = parseFloat( initialDpr[ 1]);

scale = parseFloat(( 1 / dpr). toFixed( 2));

}

if ( maximumDpr) {

dpr = parseFloat( maximumDpr[ 1]);

scale = parseFloat(( 1 / dpr). toFixed( 2));

}

}

}

if ( ! dpr && ! scale) {

var isAndroid = win. navigator.appVersion. match( /android/ gi);

var isIPhone = win. navigator.appVersion. match( /iphone/ gi);

var devicePixelRatio = win. devicePixelRatio;

if ( isIPhone) {

// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案

if ( devicePixelRatio >= 3 && ( ! dpr || dpr >= 3)) {

dpr = 3;

} else if ( devicePixelRatio >= 2 && ( ! dpr || dpr >= 2)){

dpr = 2;

} else {

dpr = 1;

}

} else {

// 其他设备下，仍旧使用1倍的方案

dpr = 1;

}

scale = 1 / dpr;

}

docEl. setAttribute( 'data-dpr', dpr);

if ( ! metaEl) {

metaEl = doc. createElement( 'meta');

metaEl. setAttribute( 'name', 'viewport');

metaEl. setAttribute( 'content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

if ( docEl. firstElementChild) {

docEl. firstElementChild. appendChild( metaEl);

} else {

var wrap = doc. createElement( 'div');

wrap. appendChild( metaEl);

doc. write( wrap. innerHTML);

}

}

function refreshRem(){

var width = docEl. getBoundingClientRect().width;

if ( width / dpr > 540) {

width = 540 * dpr;

}

var rem = width / 10;

docEl.style.fontSize = rem + 'px';

flexible. rem = win. rem = rem;

}

win. addEventListener( 'resize', function() {

clearTimeout( tid);

tid = setTimeout( refreshRem, 300);

}, false);

win. addEventListener( 'pageshow', function(e) {

if ( e. persisted) {

clearTimeout( tid);

tid = setTimeout( refreshRem, 300);

}

}, false);

if ( doc.readyState === 'complete') {

doc.body.style.fontSize = 12 * dpr + 'px';

} else {

doc. addEventListener( 'DOMContentLoaded', function(e) {

doc.body.style.fontSize = 12 * dpr + 'px';

}, false);

}

refreshRem();

flexible. dpr = win. dpr = dpr;

flexible. refreshRem = refreshRem;

flexible. rem2px = function(d) {

var val = parseFloat( d) * this. rem;

if ( typeof d === 'string' && d. match( /rem $ /)) {

val += 'px';

}

return val;

}

flexible. px2rem = function(d) {

var val = parseFloat( d) / this. rem;

if ( typeof d === 'string' && d. match( /px $ /)) {

val += 'rem';

}

return val;

}

})(window, window[ 'lib'] || (window[ 'lib'] = {}));

flexible_css.js （清楚了margin）

! function () {

var a = "@charset \" utf-8 \" ;html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",

b = document. createElement( "style");

if (document. getElementsByTagName( "head")[ 0]. appendChild( b), b. styleSheet) b. styleSheet.disabled || ( b. styleSheet. cssText = a);

else try {

b. innerHTML = a

} catch ( c) {

b. innerText = a

}

}();

3、图片预加载 

//存放图片路径的数组

var imgSrcArr = [ 'imgsrc1' , 'imgsrc2' , 'imgsrc3' , 'imgsrc4' ];

var imgWrap = [];

function preloadImg (arr) {

for ( var i = 0 ; i < arr .length; i ++ ) {

imgWrap [ i ] = new Image ();

imgWrap [ i ]. src = arr [ i ];

}

}

preloadImg ( imgSrcArr ); //或者延迟的文档加载完毕在加载图片

$ ( function () {

preloadImg ( imgSrcArr );

})

4、图片懒加载

<!DOCTYPE html>

< html>

< head>

     < script src = "http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js

" > < / script >

     < title >demo lazyload </ title >

     < meta charset= "utf-8" >

     < style type = "text/css" >

         * {

             padding : 0 ;

             margin : 0 ;

             text-decoration : none;

             list-style : none;

        }

         .layout {

             margin : 0 auto;

             width : 1000 px ;

        }

         .lazyload img {

             width : 300 px ;

             height : 400 px ;

        }

         .img-ct {

             margin-left : -50 px ;

             overflow : auto;

        }

         .item {

             float : left;

             margin-left : 50 px ;

             margin-bottom : 30 px ;

        }

     < / style >

</ head>

< body>

< div class= "lazyload" >

< div class= "layout" >

     < ul class= "img-ct" >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

         < li class= "item" >

             < a href= "javascript:void(0)" >< img data-img= "./images/banner.png" src= "./images/banner6.jpg" ></ a >

</ li >

     </ ul >

</ div >

</ div >

< script type = "text/javascript" >

var lazyLoad = ( function (){

     var clock ;

    

     function init (){

         $ (window). on ( "scroll" , function (){

             if ( clock ) {

                 clearTimeout ( clock );

            }

             clock = setTimeout ( function (){

                 checkShow ();

            }, 200 );

        })

         checkShow ();

    }

    

     function checkShow (){

         $ ( ".lazyload img" ). each ( function (){

             var $cur = $ ( this );

             if ( $cur . attr ( 'isLoaded' )){

         return ;

      }

             if ( shouldShow ( $cur )){

                 showImg ( $cur );

            }

        })

    }

     function shouldShow ($node){

         var scrollH = $ (window). scrollTop (),

             winH = $ (window). height (),

             top = $node . offset ().top;

         if ( top < winH + scrollH ){

            return true ;

       } else {

            return false ;

       }

    }

     function showImg ($node){

     $node . attr ( 'src' , $node . attr ( 'data-img' ));

     $node . attr ( 'isLoaded' , true );

    }

     return {

        init: init

    }

})()

lazyLoad . init ();

< / script >

</ body>

</ html>

5、。跨域请求的静态页面

//远端的服务器里的代码

public class HomeController : Controller

{

/// < summary >

/// 处理请求的action，不管是asp、php、asp.net、jsp....实现类似的功能就行

/// 本例中访问的完成路径将是 http://xxx.xxx.xxx.xxx:port/home/getdata

/// </ summary >

/// < param name= "callback" >客户端传来的js里的function名称 </ param >

/// < returns></ returns>

public string GetData(string callback)

{

return callback + "({\"name\": \"sd\"})";

}

//这个action只作为显示页面用，在跨域请求中没有用

public ActionResult Index()

{

return View();

}

}

<!DOCTYPE html>

< html>

< head>

< meta charset= "utf-8" />

< meta name= "viewport" content= "width=device-width" />

< title></ title>

< script src = "http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" > < / script >

</ head>

< body>

< a href= "javascript:;" class= "js" >纯js调用 </ a >

< a href= "javascript:;" class= "ajax" >ajax调用 </ a >

< script >

//用于纯js跨域请求的回调函数

var callbackHandler = function (json) {

alert ( '采用纯js跨域请求，返回的结果' + json .name);

};

$ ( function () {

//纯js跨域请求的处理代码

$ ( ".js" ). on ( 'click' , function () {

// 远端服务器的url地址（不管是什么类型的地址，比如：asp、php、asp.net、jsp等，最终生成的返回值都是一段javascript代码）

var url = "http://localhost:15493/home/getdata?callback=callbackHandler" ; //这里的localhost:15493根据实际情况进行修改

// 创建script标签，设置src属性

var script = document. createElement ( 'script' );

script . setAttribute ( 'src' , url );

// 把script标签加入head

document. getElementsByTagName ( 'head' )[ 0 ]. appendChild ( script );

//本例中 服务器返回的结果为 callbackHandler({"name": "sd"});实际上就是调用本js里的callbackHandler函数

//本方法每执行一次，head就会新添加一次 script,使用$.ajax的方法则不会

});

//使用jquery的jsonp进行跨域请求的代码

$ ( ".ajax" ). on ( 'click' , function () {

$ . ajax ({

type: "get" ,

async: false ,

url: "http://localhost:15493/home/getdata" , //这里的localhost:15493根据实际情况进行修改

data: {},

dataType: "jsonp" ,

jsonp: "callback" , //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名

//jsonpCallback: "getName",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

success : function (json) {

alert ( '采用纯jQuery的jsonp进行跨域请求，返回的结果' + json .name);

},

error : function () {

alert ( 'fail' );

}

});

});

});

< / script >

</ body>

</ html>