javascript - 优先加载图像的幻灯片放映

Question

我正在寻找一个幻灯片小部件，例如作为一个 jQuery 插件。它应该是什么样子，示意性地（虚线矩形是最初不可见的图像，通过箭头按钮导航）：

....  ....       +--+  +--+  +--+       ....  ....
.  .  .  .  [<]  |  |  |  |  |  |  [>]  .  .  .  .
....  ....       +--+  +--+  +--+       ....  ....

要求：

• 三个可见图像应尽快加载。

• 没有典型的延迟加载：最初不可见的图像应该在所有可见图像加载后立即自动加载。

理念：快速初始页面加载，优化带宽使用，没有不必要的等待时间。

建议？

Answer 1

您可以在页面加载后将源添加到隐藏图像。

隐藏图片： <img data-src="/images/image1.jpg">

页面加载后运行类似：

$(function () {
   $('img[data-src]').each(function () {
       var hImg = $(this),
           src = hImg.attr('data-src');

       hImg.attr('src', src);
   });
});

当然，幻灯片插件应该只包含在这个 document.ready 函数之后。