WordPress.org

Ready to get started?Download WordPress

Forums

Image preloading? (3 posts)

  1. cryha1
    Member
    Posted 3 years ago #

    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

    Thanks in advance!

  2. 123milliseconds
    Member
    Posted 3 years ago #

  3. sk
    Member
    Posted 2 years ago #

    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/ if you check before I launch the site, otherwise it will be here
    http://www.pdt.com.au/projects/gold-coast-low-cost-airport/

Topic Closed

This topic has been closed to new replies.

About this Topic