Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2012
    Location
    Brooklyn, New York
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    preload gallery/slider images in HTML

    I have a large, wide image 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 other images after the first appear smooth and fast?

    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.

    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.

    http://raphaelzwyer.com/testRapha/portfolio_ms.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

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

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    There are many articles on how to do this.

    A simple Google search:
    https://www.google.com/search?q=java...hrome&ie=UTF-8

    Here is a JavaScript snippet:
    http://www.mediacollege.com/internet...e/preload.html

    ^ I would go with that one. You should use the array in the tutorial.


  •  

    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
    •