在 HTML 中预加载大型画廊/滑块图像

Question

我的作品集页面中有大而宽的图片。图像以“渐进式”保存，并且加载良好。

我想知道是否有一种方法可以预加载这些图像以使它们看起来更快、更流畅。或者也许有一种方法可以将所有其他页面和图像预加载到缓存中，以便至少在第一个页面之后的所有后续页面都显得流畅和快速？任何有助于使页面加载更快、更流畅的方法。

有什么建议吗？

每张图片由多种图片组成，所有图片都包含在一张宽幅图片中（以 PSD 格式制作），访问者可以左右移动以调用相应的图片出现在中心。 不幸的是，牺牲图像质量或使它们更小不是这里的选择。

我知道这里有关于预加载图片广告的帖子，但我找不到任何适用于 HTML 代码中嵌入的图片的帖子。

请多多关照，我是 CSS 和 Javascript 新手，所以越简单我就越有可能理解它。我担心在单个实例中分解图像（使其成为一排图像而不是整个图像），将它们放在浮动 div 中并更改相应的 Javascript 代码对我来说可能太具有挑战性了，对吧...？我还能怎么做？

赞赏！

这就是我所拥有的（我想在这里发布我所有的 HTML、Javascript 和 CSS 有点过头了，我会发布一些）。大图像放置在 HTML 页面中并通过 Javascript 调用。

see here

<div class="ShiftGroup">
        <div class="ShiftGroupC">
        <div class="ShiftGroupI"><div id="ShiftGalleryFive"><img src="images/gallery_anzic1.png" width="3348" height="372" alt="imagegallery1" /></div></div>
        <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><span class="pointer"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></span></div></div>
        <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><span class="pointer"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></span></div></div>

和

gallery = document.getElementById('ShiftGalleryFour').style;

Answer 1

这是我们在其中一个项目中预加载图像的方式：

preloadImages = function(imageIndex) {

  // Finds div element containing index (1..n) and url of image 
  // (both stored as data attributes)
  var image = $(".data .image[data-index=" + imageIndex + "]");

  // Creates an image (just virtually) that is not embedded to HTML.
  // Its source is the url of the image that is to be preloaded
  var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url"));

  // Bind an event to the "virtual" image to start preloading next image when 
  // this one is done
  preloadedImage.load(function() {

    // Start preloading the next one
    preloadImages(imageIndex + 1);
  });
}

// Start preloading the first image
preloadImages(1)

在您的情况下，这只解决了问题的一部分 - 预加载。

我看到您将 html 中的所有图像都包含为 img 标记。如果您想获得更好的性能，请不要在图库的 html 中放置任何img 标签。只需 div 标签，它们将成为您图像的未来容器。这些 div 可能具有索引并包含带有图像 url 的数据属性（如我的示例所示）。当您的页面被加载时，开始预加载过程。当加载“虚拟图像”时。在其容器内创建新的图像标记并开始预加载下一个图像。

这肯定会切断你页面的下载时间。

我的示例使用了jQuery，它简化了脚本。纯 javascript 会更复杂。

更新：

这就是预加载示例的工作方式。

HTML

假设您有 4 张图片，并且它们都有自己的容器 - 一个放置单个图片的 div。

<div class="images">
  <div class="image" data-index="1" data-src="image_1_source_path"></div>
  <div class="image" data-index="2" data-src="image_2_source_path"></div>
  <div class="image" data-index="3" data-src="image_3_source_path"></div>
  <div class="image" data-index="4" data-src="image_4_source_path"></div>
</div>

JavaScript

加载文档后，可能会开始预加载过程。首先预加载第一个图像。加载此图像后，将其附加到其容器并触发下一个图像的预加载。如果加载了所有图像并且没有找到容器，也会调用return。

preloadImages = function(imageIndex) {
  var imageContainer = $(".images .image[data-index=" + imageIndex + "]");
  return if imageContainer.length === 0
  var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url"));
  preloadedImage.load(function() {
    imageContainer.append(preloadedImage);
    preloadImages(imageIndex + 1);
  });
}

$(document).ready(function(){
  preloadImages(1);
});

希望你能明白。