
資訊中心
首頁 > 資訊中心 > 網(wǎng)站運(yùn)營
移動端和PC端網(wǎng)站建設(shè)的區(qū)別
移動站在域名方面有兩種選擇:如果已經(jīng)有成型的PC端網(wǎng)站,如www.iusyp.com,那么移動端網(wǎng)站的域名最好就是m.v-zz.com;如果沒有PC站,并且也不計(jì)劃建設(shè)PC站,那么也可以直接使用主域名建設(shè)移動站。
在服務(wù)器方面要邊擇速度較快的機(jī)房,尤其是圖片加載速度要快,因?yàn)樵谝苿佣碎喿x的用戶更加喜歡瀏覽圖片,并且忍受圖片加載的時間要更短。如果網(wǎng)站打開速度過慢,甚至超過5s,那么用戶打開率就會迅速下降。只有移動端網(wǎng)站的打開速度盡量保持在3s之內(nèi),用戶才愿意在內(nèi)容上花費(fèi)一定時間。因此,移動端網(wǎng)站建設(shè)要盡量減少不必要的圖片或者動畫的使用,以保證網(wǎng)站打開速度。
建議在設(shè)計(jì)移動端網(wǎng)站的時候?qū)D片加載設(shè)計(jì)成按需加載。實(shí)現(xiàn)移動端網(wǎng)頁圖片按需加載是什么意思呢?就是在可見區(qū)域內(nèi)的圖片就加裁,不在的就不加載,而使用默認(rèn)圖片。下面列出按需加載圖片的方法,供大家參考。
步驟一:選取需要實(shí)現(xiàn)這種需求的容器中的所有圖片,不在容器中的圖片就不用管了。例如:
$('.container').find('img');
步驟二:如何判斷圖片是否到達(dá)可見區(qū)域呢?
一般我們會想到touchmove,這是錯的,為什么呢?正常情況下,我們touchmove都是上劃一下就松開,那么滾動也就一下。但是當(dāng)我們上劃很多時,由于“慣性”touchend以后,滾動條還會繼續(xù)滾動,那么這一段的滾動距離就是不可控的了。
然后我們會想到scroll,這就對了,在這個容器中監(jiān)聽scroll事件就可以了。步驟三:什么時候可以認(rèn)為圖片到達(dá)可見區(qū)域?即圖片本身距離頂部的高度≤可見區(qū)域本身的高度+滾動的距離。
例如,滾動的距離為0,圖片本身距離頂部的高度小于可見區(qū)域高度的圖片就在視野內(nèi)。
具體實(shí)現(xiàn)如下:
<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的值,該值視個人情況而定,作者是為了體現(xiàn)得更明顯。如果是已經(jīng)加載過的圖片就不用再加載了。在scroll向上的時候調(diào)用,向下的時候就沒必要了,在這里作者用了一個全局變量來標(biāo)識網(wǎng)頁的位置,當(dāng)然在進(jìn)入這個頁面進(jìn)行初始化的時候也要調(diào)用一次,也就是沒有發(fā)生滾動事件的情況。
<script type="text/javascript">
//滾動監(jiān)聽
$(window).SCROLL(function(event){
if(me.isscrolltop)
me.imgdelayload();
})
</script>
還有一個問題需要注意一下,就是移動端和PC端支持的圖片類型是不一樣的,有些SEOER直接把PC端的圖片格式調(diào)用到移動端,這樣在有些時候回導(dǎo)致移動端用戶無法正常瀏覽圖片,這是相當(dāng)糟糕的體驗(yàn)。