jQuery按需加载轮播图(web前端性能优化)

引言

关于幻灯轮播图，想必大家都不陌生，尤其是基于 jQuery 的，插件、代码网上一搜一大堆，但是真正符合自己需求的几乎没有，所以我要打造一个符合自身需求，经得起广大网民考验的 jQuery 轮播图！

思路

为什么说网上其他一些轮播图不符合我的要求？我的需求又是什么呢？

现在网上可以找到的多数幻灯轮播图的 jQuery 插件的作法是，先把图片和链接的 HTML 写好，然后控制隐藏和显示来轮流展示当前的幻灯图片。但是对用户而言，我们始终只是看到当前的一张图片，那其他几张隐藏的图片为什么要事先加载进来呢？这不是费时费力吗？所以我的第一个需求是按需加载。

我们一般会把轮播图放在首页展示，但是首页的重点内容应该是最近更新的文章，至少我不认为图片展示功能需要被搜索引擎收录，所以我的第二个需求是符合 SEO。

实现

冲着以上两个需求，我做了一个 DEMO ，大家不妨看看这个 DEMO 的源代码，发现区别了吗？是的，在这个 DEMO 的 HTML 源代码中，你看不到任何的图片和相关信息，都由 JS 载入进来的，也就是说爬虫爬不到，而且是随着图片的切换，一张一张地载入当前的幻灯图片。

这里我就只分享一下我的 JS 写法，HTML 什么就请各位看源码吧，代码我就不一一细说了，注释也都写得很明白了。

rush:js;"> $(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提示','图片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 = '

' + ' ' + '

',slideTextHtml = 'imgurl + '" rel="external nofollow" title="' + imgalt + '">' + imgalt+ ''; 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 = '

',trigger = '

',slideText = '

'; $('#panel').after(slideBg + trigger + slideText); //获取图片的 alt 作为显示信息 $('#slide_text').html(getImgInfo(0).slideTextHtml); //注入触发节点 var triggerUl = $('

'); triggerUl.appendTo($('#trigger')); for (var i=0,j=config.picInfo; i' + (i+1).toString() +'').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(); })