幻灯片显示优先加载的图像

Slide show with prioritized loading of images

本文关键字：图像 加载 显示 幻灯片      更新时间：2023-09-26

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

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

要求:

  • 没有典型的延迟加载:最初不可见的图像应该自动加载

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

建议吗?

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

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

加载页面后运行如下命令:

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

幻灯片放映插件应该只包含在本文档之后。当然是现成的函数

相关文章：