在HTML中预载大型图库/滑块图像 [英] preload large gallery/slider images in HTML

问题描述

我在一个投资组合页面中有大而宽的图像。这些图像保存为渐进式，并且可以正常加载。

我想知道是否有一种方法可以预先加载这些图像，使它们显得更快更流畅。或者，也许有办法将所有其他页面和图像预加载到缓存中，以便至少所有后面的页面看起来平滑和快速？任何建议？

每张图片由多种图片组成所有这些图像都在一幅宽的图像中（在PSD中准备），访问者可以左右移动以呼叫相应的图像出现在中心。
不幸的是，牺牲图像质量或使它们变小不是一个选项。

我知道这里有关于预加载图片广告的帖子，但我可以' t找到任何与嵌入HTML代码中的图像一起工作。

请有merci，我是一个CSS和Javascript新手，所以越简单越容易，我会理解它。我怕在单个实例中分解图像（使其成为一排图像而不是整个图像），将它们放置在浮动div中，并更改相应的Javascript代码对我来说可能太具有挑战性，对吧......？如何才能做到这一点？

赞赏！

以下是我所拥有的（我猜这会是过度杀伤发布我的所有HTML，Javascript和CSS在这里，我会张贴一些）。大图像放在HTML页面中，并通过Javascript调用。

。纯JavaScript会更复杂。

更新：

这是预加载例子可能像。

HTML

假设您有4张图片，并且所有图片都有其容器 -

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

JavaScript

加载，预加载程序可能启动。您首先预加载第一张图像。加载完成后，将其附加到其容器并触发下一张图像的预加载。还有 return ，如果所有图像都被加载并且没有找到容器，则调用

  preloadImages = function（imageIndex）{
 var imageContainer = $（。images.image [data-index =+ imageIndex +]）; 
返回if imageContainer.length === 0 
 var preloadedImage = $（new Image（））。attr（src，image.attr（data-full-url））; 
 preloadedImage.load（function（）{
 imageContainer.append（preloadedImage）; 
 preloadImages（imageIndex + 1）; 
}）; 
 
 $ b $（document）.ready（function（）{
 preloadImages（1）; 
}）; 
  

希望您明白。

I have large, wide images within a portfolio page. The images are saved "progressive" and they load fine.

I was wondering if there's a way though to kind of preload those images to make them appearing faster and smoother. Or maybe there's a way to preload all the other pages and images into the cache so that at least all the following pages after the first appear smooth and fast? Whatever helps to make the pages load faster and smoother.

Any suggestions?

Each image consists of a variety of images, all of them within one wide image (prepared in PSD) and the visitor can shift left and right to call for the respective image to appear in the center. Unfortunately sacrificing on the image quality or make them smaller is not an option here.

I know there are posts here on preloading images ad stuff but I can't find any that work with the image embedded in the HTML code.

Please have merci, I'm a CSS and Javascript novice, so the simpler the more likely I'll understand it. I'm afraid breaking up the images in single instances (make it a row of images instead of one whole image), place them in a floated div and change the respective Javascript code could be too challenging for me, right...? How else could I do that?

Appreciated!

Here's what I have (I guess it would be overkill to post all my HTML, Javascript and CSS here, I'll post some). The large images are placed within the HTML page and called via 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>

and

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

解决方案

This is how we preloaded images in one of our projects:

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)

In your case this solves only one part of the problem - preloading.

I see you include all images in html as img tags. If you want to achieve better performance, do not place any img tags in your html of the gallery. Just div tags that will become the future containers of your images. These divs may have indexes and contain data attributes with image urls (as seen in my example). When your page gets loaded, start preloading procedure. When an "virtual image" gets loaded. Create new image tag inside its container and start preloading the next image.

This will definitely cut off the download time of your page.

My example uses jQuery which simplifies the script. Pure javascript would be more complicated.

UPDATE:

This is how preloading example may work like.

HTML

Let's say you have 4 images and all of them has its container - a div in which individual image is to be placed.

<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

After the the document is loaded, preloading procedure may start. You start by preloading the first image. After this one is loaded, you append it to its container and trigger preloading of the next image. There is also return called if all images are loaded and no container is found.

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

Hopefully you get the idea.

这篇关于在HTML中预载大型图库/滑块图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！