Title: Image preloading?
Last modified: August 19, 2016

---

# Image preloading?

 *  [cryha1](https://wordpress.org/support/users/cryha1/)
 * (@cryha1)
 * [15 years, 3 months ago](https://wordpress.org/support/topic/image-preloading/)
 * Hey everyone,
 * Just wondering if someone could help me out. Ive got the the tanzaku theme working
   pretty much the way i want. My only problem is when a user 1st visits my website
   the effects work properly (fade in instead of ease in) but the images dont seem
   to have preloaded so they load after the effects have completed. Looks choppy.
 * I think this only happens on the 1st visit before the images have been cached.
   Ive also seen this happening on other sites using tanzaku.
 * Does anyone know how this could be fixed so that the grid-items dont animate 
   in until the images have been fully loaded? maybe some preloading effect/script?
 * Take note of the fade in and then the image loading over the top. Here is the
   link to see the problem. [LINK](http://www.arbol.com.au/work/)
 * Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Alwyn Botha](https://wordpress.org/support/users/123milliseconds/)
 * (@123milliseconds)
 * [15 years, 3 months ago](https://wordpress.org/support/topic/image-preloading/#post-1967605)
 * [http://www.pageresource.com/jscript/jpreload.htm](http://www.pageresource.com/jscript/jpreload.htm)
 * [http://www.javascriptkit.com/script/script2/preloadimage.shtml](http://www.javascriptkit.com/script/script2/preloadimage.shtml)
 * [http://www.vclcomponents.com/JavaScript/Scripts_and_Programs/Image_Effects/Image_Display/Preload_image_script-info.html](http://www.vclcomponents.com/JavaScript/Scripts_and_Programs/Image_Effects/Image_Display/Preload_image_script-info.html)
 * [http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm](http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm)
 *  [sk](https://wordpress.org/support/users/renegadesk/)
 * (@renegadesk)
 * [14 years, 8 months ago](https://wordpress.org/support/topic/image-preloading/#post-1967894)
 * Hey cryha1 (is your name castro? I’m one of dickmann’s mates living in Melbourne!),
   are you still having this problem?
 * For you or anyone else that has this issue, I’ve worked out an unpretty way to
   solve it, just by loading the attached images within a hidden div. Very unsexy
   but it does the job. Hoping to improve on it but we’ll see.
 * What I’m doing on my site is loading the image thumbs then when a user clicks
   on one it loads the bigger image in a certain position with jQuery.
 * So my output for the gallery image thumbs is:
 *     ```
       <div class="gallery-images">
           <?php
               $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
               $attachments = get_posts($args);
               if ($attachments) {
               	foreach ( $attachments as $attachment ) {
               		the_attachment_link( $attachment->ID , false );
               	}
               }
           ?>
       </div>
       ```
   
 * Then my pre-loading like this, obviously with the div “hidden” as display:none;
 *     ```
       <div class="hidden">
           <?php
               $preArgs = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
               $preAttachments = get_posts($preArgs);
               if (count($preAttachments) > 1) {
                   foreach ( $preAttachments as $attachment ) {
                       the_attachment_link( $attachment->ID , true );
                   }
               }
           ?>
       </div>
       ```
   
 * Works nicely for me. If you’re interested in the image swap I’m doing, here it
   is:
 *     ```
       //Swap Image on Click
       $('.gallery-images a').click(function() {
           var mainImage = $(this).attr("href"); //Find Image Name
           $(".background-image img").fadeOut('slow', function(){
               $(".background-image img").attr({ src: mainImage });
           });
           $(".background-image img").fadeIn('slow');
           return false;
       });
       ```
   
 * You can see the result here [http://new.pdt.com.au/projects/gold-coast-low-cost-airport/](http://new.pdt.com.au/projects/gold-coast-low-cost-airport/)
   if you check before I launch the site, otherwise it will be here
    [http://www.pdt.com.au/projects/gold-coast-low-cost-airport/](http://www.pdt.com.au/projects/gold-coast-low-cost-airport/)

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Image preloading?’ is closed to new replies.

## Tags

 * [image](https://wordpress.org/support/topic-tag/image/)
 * [preload](https://wordpress.org/support/topic-tag/preload/)

 * 2 replies
 * 3 participants
 * Last reply from: [sk](https://wordpress.org/support/users/renegadesk/)
 * Last activity: [14 years, 8 months ago](https://wordpress.org/support/topic/image-preloading/#post-1967894)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics