Wordpress：拉动（大量）帖子图像时加载图像慢

Question

I'm somewhat of a wordpress noob, trying to get some images from multiple posts to show up in a grid. The site I'm working on will essentially take the "Featured Image" many posts (56 max) and show it on the main page, loading the image in the post when it's clicked on. Here's the code I'm working with:

$args = array( 'numberposts' => 56, 'order'=> 'DESC', 'orderby' => 'date', 'category' => '120' ); $postslist = get_posts( $args );

            if(count($postslist) > 0){
                foreach ($postslist as $post) :  setup_postdata($post); ?> 
                    <div class='oneCell'>
                        <?php 
                            $image = get_the_post_thumbnail($this_post->ID, 'full size'); 
                            $imageSrc = substr($image, strpos($image, "src") + 5);
                            $imageSrc = substr($imageSrc, 0, strPos($imageSrc, "\""));

                            $finalImage = "<img class='lazy' src='/images/grey.png' data-original='" . $imageSrc . "' />";
                            $lastImage = "<a href='";
                            $lastImage .= catch_that_image();
                            $lastImage .= "'>";
                            $lastImage .= $finalImage;
                            $lastImage .= "</a>";

                            echo $lastImage;
                        ?>
                    </div>
                <?php 
                    $currentCount = $currentCount + 1;
                endforeach;

The $lastImage in the loop creates an "a" tag, with an image displayed via a jquery control. The control is NOT the issue, as it is working 100% fine on another part of the site. When this renders, it basically renders the squares of grey without the images (exactly what I expect) but very slowly, rendering one box every 1/2 - 3/4 of a second, going one at a time until they are all done, then the page works as expected.

My guess is it is because my code isn't the most efficient. Can someone point me in the right direction to clean this up? Or some ideas on how to speed up the loading times?

Answer 1

I believe the delay is not caused by the browser trying to display the images, but PHP overwhelming the DB with 56 queries.

The native function is meant to pull the thumbnail of one post. If you will query for the images of N posts, you should use a custom script to retrieve the thumbail directly from the wp_postmeta table in just one query.

Other than tinkering with the query ($wpdb class provides the query method to do exactly this), you can also use any caching mechanism to hit the DB only the first time each image is requested. Perhaps even W3TC plugin is able to cache the results of the get_thumbnail function.