幻灯片放映，优先加载图像

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);
   });
});

幻灯片插件应该只包含在本文档之后。当然是功能。