$(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="/UploadFiles/2021-04-02/' + imgSrc + '">

按需加载的网络请求情况
 
从图上可以看到页面加载的时候自动切换或者用户点击切换之前只加载了一张slide图，大大节省了页面加载量。
优势
同样的效果，只是实现方法不同？会不会很蛋疼？这有什么优势呢？
举个例子来说，优化前，假设首页切换的幻灯图片有5张，平均每张图片20K，也就是说你的首页至少要加载100K的图片，而这100K的图片你能保证每个用户都会去看吗？如果用户不看，岂不是白白浪费了这100K的载入速度？
优化后，在首页初次载入的时候，仅需加载一张1K左右的，甚至是可有可无的 loading 图片，当用户点击下一张或者达到定时器的设置时才会去加载下一张图片，大大节省了载入的时间。1K？100K？你懂的。
另外，用 JS 载入所需的图片还有一个好处，就是在一些不支持 JS 的手机浏览器上，载入 100K 的图片对于无法切换的轮播图而言，是一个极大的累赘，而且也会大大降低用户体验。