Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

As the title says, i would like a nice bit of coding to stick in my functions that pre-loads any images that are attached to the next post.

This means that whilst my users are browsing, they page will load, but it will actually be loading the next page, so when you click-through, the images should already be there and waiting!

Think of it as 'buffering' for image.

Couple of things to note: I use the post_thumbnail feature and have different sizes setup through functions.php. I also have a plugin that enables multiple Featured Images per post.

I posed this question on stackoverflow (who pointed me here) and was given this code to be placed in the loop;

    <?php
$next_post = get_adjacent_post(false, '', false );// set last param to true if you want post that is chronologically previous
$args = array('post_type' => 'attachment', 'numberposts' => -1, 'post_parent' => $next_post->ID);
$attachments = get_posts($args);
?>
<script type="text/javascript">
    $(document).ready(function(){
        var images = '';
        <?php foreach($attachments as $attachment):
            $mime = $attachemnt->post_mime_type;
            if($mime == 'image/jpeg' || $mime == 'image/gif' || $mime == 'image/png'): 
        ?>
        images += '<img src="<?php $attachment->guid ?>" style="display:none" />';
        <? endif; endforeach; ?>
        if(images != ''){
            $(body).append(images);
        }
    });
</script>

Although to looks like it could be onto a winner, it doesn't seem to be doing the job quite yet. In my page source it returns the following:

<script type="text/javascript">
    jQuery(document).ready(function(){
        var images = '';
                if(images != ''){
            jQuery(body).append(images);
        }
    });
</script>

It is possible i am doing something wrong as i am a chronic copy and paster!

Anyone got any thoughts on this?

Thanks guys!

share|improve this question
    
the posts should be add by the wordpress and not as <img tag. also you might want to look at codecanyon.net/item/preloadify/133636 –  Bainternet Mar 24 '11 at 11:12
    
Thanks @Bainternet. That codecanyon piece does not load the images from the next (or prev) post, simply shows a nice loading image whilst they load! The images in my posts are not called using <img tags, they are called using codes such as this: ` <?php if ( has_post_thumbnail() ) { the_post_thumbnail('portrait'); } else { echo '<img src="#" alt="Something Went Wrong?" title="Sorry - Something went wrong?" />'; } ?>` I thought that that automatically made them an attachment to the post? –  Infocentre Mar 24 '11 at 11:20
add comment

2 Answers

up vote 0 down vote accepted

This is what cam of the other piece of code - BIG thank you to @Ivan Ivanic

<?php
    $next_post = get_adjacent_post(false, '', false );// set last param to true if you want post that is chronologically previous
    //for debug
    if(!empty($next_post)){
       echo 'Next post title is: '.$next_post->post_title;
    } else {
        echo 'global $post is not set or no corresponding post exists';
    }
    $args = array('post_type' => 'attachment', 'numberposts' => -1, 'post_parent' => $next_post->ID);
    $attachments = get_posts($args);
    // print attachments for debug
    echo '<pre>';print_r($attachments);echo '</pre>'; ?> <script type="text/javascript">
    $(document).ready(function(){
        var images = '';
        <?php foreach($attachments as $attachment):
            $mime = $attachment->post_mime_type;
            if($mime == 'image/jpeg' || $mime == 'image/gif' || $mime == 'image/png'): 
        ?>
        images += '<img src="<?php echo $attachment->guid ?>" style="display:none" />';
        <? endif; endforeach; ?>
        if(images != ''){
            $('body').append(images);
        }
    }); </script>
share|improve this answer
    
You can click the checkbox to mark this answer as "accepted". This way, the system know that you found the solution and the question does not stay "unanswered". –  Jan Fabry Apr 8 '11 at 13:42
add comment

Since you are using Post Thumbnails change your code to this:

    <?php
$next_post = get_adjacent_post(false, '', false );// set last param to true if you want post that is chronologically previous
$thumbnail = '';
?>
<script type="text/javascript">
    $(document).ready(function(){
        var images = '';
        <?php $thumbnail = wp_get_attachment_image_src ( get_post_thumbnail_id ( $next_post->ID ), "size"); 
        if ($thumbnail != false && $thumbnail != ''){
            ?>
            images += '<img src="<?php echo $thumbnail[0]; ?>" style="display:none" />';
            <?php
        }
        ?>
        if(images != ''){
            $(body).append(images);
        }
    });
</script>
share|improve this answer
    
Thanks for that - but actually, a thumbnail is automatically attached to a post. As i use attachments (like images in a post) as well, its best to stick with the attachments call. Thanks bro! –  Infocentre Mar 24 '11 at 12:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.