jQuery图片延迟加载插件Tab选项卡异步加载图片

Tab 选项卡里的图片懒加载，用 jQuery 做起来其实蛮顺手的。这套插件主要是一个老问题：页面图片太多，加载慢得让人抓狂。尤其是多个 tab 的场景，一下子加载全部图太浪费。

延迟加载的原理挺简单——先用个小图占位，等用户点到对应 tab 再换成真图。插件里用的是data-src存图片地址，通过监听 tab 切换事件来触发加载。既省资源，又提升用户体验。

HTML 结构基础，一个#tabs容器里放两个 tab，每个 tab 里各有一张图片。src默认是个 loading 图，真正的地址藏在data-src里：

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
  <div id="tab1">
    <img data-src="path/to/image1.jpg" src="loading.gif" alt="Image 1">
  </div>
  <div id="tab2">
    <img data-src="path/to/image2.jpg" src="loading.gif" alt="Image 2">
  </div>
</div>

JavaScript 部分就是写个 jQuery 插件，监听 tab 切换事件，把data-src赋值给src。加载时加个loading类，等图加载完再移除。插件名叫lazyLoadTabs，调用也简单：

(function($) {
  $.fn.lazyLoadTabs = function() {
    return this.each(function() {
      var $tabs = $(this);
      $tabs.on('shown.bs.tab', 'a[data-toggle="tab"]', function(e) {
        var $targetTab = $($(e.target).attr('href'));
        var $images = $targetTab.find('img[data-src]');
        $images.each(function() {
          var $image = $(this);
          if (!$image.attr('src') || $image.attr('src').includes('loading')) {
            $image.attr('src', $image.data('src'));
            $image.addClass('loading');
            $image.on('load', function() {
              $image.removeClass('loading');
            });
          }
        });
      });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('#tabs').lazyLoadTabs();
});

实测下来效果还不错，尤其是移动端，提升挺的。如果你页面里 tab 比较多，图片量也大，这插件可以帮你省下不少加载时间哦。