移动端和PC端网站建设的区别

移动站在域名方面有两种选择：如果已经有成型的PC端网站，如www.v-zz.com，那么移动端网站的域名最好就是m.v-zz.com；如果没有PC站，并且也不计划建设PC站，那么也可以直接使用主域名建设移动站。

在服务器方面要边择速度较快的机房，尤其是图片加载速度要快，因为在移动端阅读的用户更加喜欢浏览图片，并且忍受图片加载的时间要更短。如果网站打开速度过慢，甚至超过5s，那么用户打开率就会迅速下降。只有移动端网站的打开速度尽量保持在3s之内，用户才愿意在内容上花费一定时间。因此，移动端网站建设要尽量减少不必要的图片或者动画的使用，以保证网站打开速度。

建议在设计移动端网站的时候将图片加载设计成按需加载。实现移动端网页图片按需加载是什么意思呢？就是在可见区域内的图片就加裁，不在的就不加载，而使用默认图片。下面列出按需加载图片的方法，供大家参考。

步骤一：选取需要实现这种需求的容器中的所有图片，不在容器中的图片就不用管了。例如：

$('.container').find('img');

步骤二：如何判断图片是否到达可见区域呢？

一般我们会想到touchmove，这是错的，为什么呢？正常情况下，我们touchmove都是上划一下就松开，那么滚动也就一下。但是当我们上划很多时，由于“惯性”touchend以后，滚动条还会继续滚动，那么这一段的滚动距离就是不可控的了。

然后我们会想到scroll，这就对了，在这个容器中监听scroll事件就可以了。步骤三：什么时候可以认为图片到达可见区域？即图片本身距离顶部的高度≤可见区域本身的高度＋滚动的距离。

例如，滚动的距离为0，图片本身距离顶部的高度小于可见区域高度的图片就在视野内。

具体实现如下：

<script type="text/javascript">

imgdelayload:function(){

var img=$('.pic-list').find('img')

src="";

windowheighscrolltop=$(window).height()+document.body.scrollTop;

img.each(function(index, el){

src=$(this).attr("data-src");

if(windowheighscrolltop>(this.offsetTop+200)){

if(this.src.indexof("logo1")>0){

this.src=src;

}

}

})

}

</script>

可以看到多加了一个200的值，该值视个人情况而定，作者是为了体现得更明显。如果是已经加载过的图片就不用再加载了。在scroll向上的时候调用，向下的时候就没必要了，在这里作者用了一个全局变量来标识网页的位置，当然在进入这个页面进行初始化的时候也要调用一次，也就是没有发生滚动事件的情况。

<script type="text/javascript">

//滚动监听

$(window).SCROLL(function(event){

if(me.isscrolltop)

me.imgdelayload();

})

</script> 

还有一个问题需要注意一下，就是移动端和PC端支持的图片类型是不一样的，有些SEOER直接把PC端的图片格式调用到移动端，这样在有些时候回导致移动端用户无法正常浏览图片，这是相当糟糕的体验。