www.webdeveloper.com
Results 1 to 2 of 2

Thread: preload large gallery/slider images in HTML

  1. #1
    Join Date
    Aug 2012
    Location
    New York
    Posts
    13

    preload large gallery/slider images in HTML

    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? I there a way to achieve it with only CSS?

    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. Like this

    HTML Code:
    <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 then

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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,109
    There are a couple of ways I can think of to reduce the issue, but they all require splitting up the very large graphic file. To begin, browsers will try to load any image file referred to in an <img> tag, but you don't really have much control over the sequence in which they are loaded. They're generally going to load in the order in which they appear in the HTML code, but that's not a hard and fast rule.

    You could stick with plain HTML and just have multiple <img> tags. And if you store the image files on different domain (or subdomain), it will give you some improvement in performance because most browsers will only keep 4 simultaneously open HTTP requests per domain. This is certainly the easiest solution and the best place to start.

    The other option would be to only include the images needed for the initial display in the HTML, and write some JavaScript to load the balance of the images in the background or almost on-demand. Not a simple job, but not outrageously difficult either.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles