0

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

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

有什么建议么？

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

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

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

赞赏！

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

看这里

<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;
4

1 回答 1

0

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

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标签。如果您想获得更好的性能，请不要img在图库的 html 中放置任何标签。只是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);
});

希望你明白这一点。

于 2012-09-21T18:12:12.240 回答