jQuery按需加載輪播圖(web前端性能優化)

2019-11-19 17:32:09

字體：大中小

來源：轉載

供稿：網友

引言

關于幻燈輪播圖，想必大家都不陌生，尤其是基于 jQuery 的，插件、代碼網上一搜一大堆，但是真正符合自己需求的幾乎沒有，所以我要打造一個符合自身需求，經得起廣大網民考驗的 jQuery 輪播圖！

思路

為什么說網上其他一些輪播圖不符合我的要求？我的需求又是什么呢？

現在網上可以找到的多數幻燈輪播圖的 jQuery 插件的作法是，先把圖片和鏈接的 HTML 寫好，然后控制隱藏和顯示來輪流展示當前的幻燈圖片。但是對用戶而言，我們始終只是看到當前的一張圖片，那其他幾張隱藏的圖片為什么要事先加載進來呢？這不是費時費力嗎？所以我的第一個需求是按需加載。

我們一般會把輪播圖放在首頁展示，但是首頁的重點內容應該是最近更新的文章，至少我不認為圖片展示功能需要被搜索引擎收錄，所以我的第二個需求是符合 SEO。

實現

沖著以上兩個需求，我做了一個 DEMO ，大家不妨看看這個 DEMO 的源代碼，發現區別了嗎？是的，在這個 DEMO 的 HTML 源代碼中，你看不到任何的圖片和相關信息，都由 JS 載入進來的，也就是說爬蟲爬不到，而且是隨著圖片的切換，一張一張地載入當前的幻燈圖片。

這里我就只分享一下我的 JS 寫法，HTML 什么就請各位看源碼吧，代碼我就不一一細說了，注釋也都寫得很明白了。

$(function() {  var WangeSlide = (function() {    //配置    var config = {      //輪播圖尺寸      width : 960,      height : 350,      //是否自動切換      autoSwitch : true,      //自動切換間隔時間（毫秒）      interval : 6000,      //輪播圖圖片路徑      picPath : 'http://www.dowebok.com/demo/2014/93/img/',      //輪播圖圖片信息：圖片文件名 / 圖片標題 / 圖片指向鏈接      picInfo : [        ['fullimage1.jpg', '圖片1提示','http://codepen.io/webstermobile/'],        ['fullimage1.jpg', '圖片2提示','http://codepen.io/webstermobile/'],        ['fullimage1.jpg', '圖片3提示','http://codepen.io/webstermobile/']      ]    };    //獲取圖片信息    /**     * @param index 圖片所在的索引值    **/    var getImgInfo = function(index) {      var imgSrc = config.picPath + config.picInfo[index][0],        imgAlt = config.picInfo[index][3],        imgUrl = config.picInfo[index][4],        imgId = 'slide_' + (index+1).toString(),        imgHtml = '<li id="' + imgId + '">' +              '  <a href="' + imgUrl +'" rel="external nofollow" title="' + imgAlt + '" class="pic">' +              '    <img src="' + imgSrc + '" alt="' + imgAlt + '" class="slide_thumb" />' +              '  </a>' +            '</li>',        slideTextHtml = '<a href="' + imgUrl + '" rel="external nofollow"  title="' + imgAlt + '">' + imgAlt+ '</a>';      return {        imgAlt : imgAlt,        imgUrl : imgUrl,        imgHtml : imgHtml,        slideTextHtml : slideTextHtml      }    };    //圖片完全加載后緩慢加載顯示    var fadeInImg = function(el, speed) {      //console.log(el)      el.find("img").load(function() {        el.find("img").addClass("loaded")        el.fadeIn(speed)      });    };    //圖片切換    /**     * @param index 圖片所在的索引值     * @param triggerCurEl 當前觸發節點元素    **/    var imgSwitch = function(index, triggerCurEl) {      var slideId = 'slide_' + (index+1).toString(),        slideIdEl = document.getElementById(slideId);      if (slideIdEl) {        //如果已有對應的元素，則顯示已有元素        var panelLi = $('#panel ul li');        panelLi.hide();        $(slideIdEl).fadeIn('slow');      } else {        //如果還沒有對應的元素，則注入元素        $(getImgInfo(index).imgHtml).appendTo($('#panel ul'));        var panelLi = $('#panel ul li');        panelLi.hide();        //載入顯示圖片        fadeInImg($("#" +slideId), 'slow');      }      //獲取圖片的 alt 作為顯示信息      $('#slide_text').html(getImgInfo(index).slideTextHtml);      //當前狀態 cur      $('#trigger ul li').removeClass('cur');      triggerCurEl.addClass('cur');    };    //輪播圖    var slide = function() {      //設置輪播圖尺寸      $('#panel').css({        'width' : config.width + 'px',        'height' : config.height + 'px'      });      var result = getImgInfo(0).imgHtml      //初使化輪播圖，只加載第一張圖片信息      $('#panel ul').html($(result));      //載入顯示圖片      fadeInImg($('#slide_1'), 500);      //注入背景層 + 觸發器容器 + 輪播圖文字容器      var slideBg = '<div id="slide_bg"></div>',        trigger = '<div id="trigger"></div>',        slideText = '<div id="slide_text"></div>';      $('#panel').after(slideBg + trigger + slideText);      //獲取圖片的 alt 作為顯示信息      $('#slide_text').html(getImgInfo(0).slideTextHtml);      //注入觸發節點      var triggerUl = $('<ul></ul>');      triggerUl.appendTo($('#trigger'));      for (var i=0, j=config.picInfo; i<j.length; i++) {        $('<li>' + (i+1).toString() +'</li>').appendTo(triggerUl);      }      //當前狀態 cur      $('#trigger ul li').eq(0).addClass('cur');      //點擊觸發節點      $("#trigger ul li").click(function(){        var index = $("#trigger ul li").index($(this))        //console.log(index)        imgSwitch(index,$(this))      })      //鼠標懸停時，停止切換      var goSwitch = true;      $('#panel').hover(        function() {goSwitch = false},        function() {goSwitch = true}      );      //自動切換      if (config.autoSwitch) {        setInterval(function() {          if (goSwitch) {            //判斷當前cur所在的索引值            var index = parseInt($('.cur','#trigger').text()) - 1;            if (index > (config.picInfo.length-2)) {              index = -1;            }            imgSwitch((index+1), $('#trigger ul li:eq(' + (index+1) + ')'));          }        }, config.interval);      }    };    return {      //初使化      init : function() {        slide();      }    }  })();  WangeSlide.init();})

按需加載的網絡請求情況