Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
09-19-2012, 10:10 PM #1
- Join Date
- Aug 2012
- Brooklyn, New York
- 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?
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.
<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;
09-19-2012, 10:14 PM #2
- Join Date
- Jun 2011
- Thanked 241 Times in 240 Posts
There are many articles on how to do this.
A simple Google search:
^ I would go with that one. You should use the array in the tutorial.