前端性能優化之jQuery按需加載輪播圖

時間 2019-11-07

原文原文鏈接

引言

關於幻燈輪播圖，想必你們都不陌生，尤爲是基於 jQuery 的，插件、代碼網上一搜一大堆，可是真正符合本身需求的幾乎沒有，因此我要打造一個符合自身需求，經得起廣大網民考驗的 jQuery 輪播圖！css

思路

爲何說網上其餘一些輪播圖不符合個人要求？個人需求又是什麼呢？html

如今網上能夠找到的多數幻燈輪播圖的 jQuery 插件的做法是，先把圖片和連接的 HTML 寫好，而後控制隱藏和顯示來輪流展現當前的幻燈圖片。可是對用戶而言，咱們始終只是看到當前的一張圖片，那其餘幾張隱藏的圖片爲何要事先加載進來呢？這不是費時費力嗎？因此個人第一個需求是按需加載。web

咱們通常會把輪播圖放在首頁展現，可是首頁的重點內容應該是最近更新的文章，至少我不認爲圖片展現功能須要被搜索引擎收錄，因此個人第二個需求是符合 SEO。瀏覽器

實現

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

這裏我就只分享一下個人 JS 寫法，HTML 什麼就請各位看源碼吧，代碼我就不一一細說了，註釋也都寫得很明白了。app

$(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 +'" title="' + imgAlt + '" class="pic">' +
                            '        <img src="' + imgSrc + '" alt="' + imgAlt + '" class="slide_thumb" />' +
                            '    </a>' +
                        '</li>',
                slideTextHtml = '<a href="' + imgUrl + '"  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();

})