Question

我在投资组合页面中拥有大而宽的图像。图像保存为“渐进式”，并且加载正常。

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

有什么建议吗？

每个图像由各种图像组成，所有图像都在一个宽图像（用PSD编写）中，并且访问者可以左右移动以呼叫相应的图像出现在中心。不幸的是，牺牲图像质量或使它们变小不是一种选择。

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

请有merci，我是一个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);
});

希望你明白这一点。

以HTML格式预加载大型图库/滑块图像

1 个答案:

HTML

的JavaScript