html轮播图速度加快,jQuery按需加载轮播图(web前端性能优化)

引言

关于幻灯轮播图，想必大家都不陌生，尤其是基于 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/webster