1. <center id="v5v79"><small id="v5v79"></small></center>
    2. <big id="v5v79"><nobr id="v5v79"></nobr></big>
    3. <big id="v5v79"><nobr id="v5v79"></nobr></big>
    4. 資訊中心

      資訊中心

      首頁 > 資訊中心 > 網站運營

      移動端和PC端網站建設的區別

      移動站在域名方面有兩種選擇:如果已經有成型的PC端網站,如www.alishasharma.com,那么移動端網站的域名最好就是m.v-zz.com;如果沒有PC站,并且也不計劃建設PC站,那么也可以直接使用主域名建設移動站。

      在服務器方面要邊擇速度較快的機房,尤其是圖片加載速度要快,因為在移動端閱讀的用戶更加喜歡瀏覽圖片,并且忍受圖片加載的時間要更短。如果網站打開速度過慢,甚至超過5s,那么用戶打開率就會迅速下降。只有移動端網站的打開速度盡量保持在3s之內,用戶才愿意在內容上花費一定時間。因此,移動端網站建設要盡量減少不必要的圖片或者動畫的使用,以保證網站打開速度。

      移動端和PC端網站建設的區別

      建議在設計移動端網站的時候將圖片加載設計成按需加載。實現移動端網頁圖片按需加載是什么意思呢?就是在可見區域內的圖片就加裁,不在的就不加載,而使用默認圖片。下面列出按需加載圖片的方法,供大家參考。

      步驟一:選取需要實現這種需求的容器中的所有圖片,不在容器中的圖片就不用管了。例如:

      $('.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端的圖片格式調用到移動端,這樣在有些時候回導致移動端用戶無法正常瀏覽圖片,這是相當糟糕的體驗。





      評論(0 條評論)
      游客
      頂部
      欧美av在线_国产av在在免费线观看美女_天天看高清影视在线www-天天射电影网