-2

I have a loop of some images (custom post type) that are in a tiny slideshow. There are about 30 of them.

When the user clicks the tiny slideshow, it pulls up a fancy-box gallery that is populated by a loop of the large images.

The problem is that I don't want to load 30 large images, if no one ever even clicks the slideshow, and especially on a phone, where that option doesn't even exist.

What is the best way for me to load that .php loop of the big images, only after the user had clicked the slideshow with jQuery? I can load simple html strings, but having trouble with a whole chunk of PHP and routing image paths.

I've played with .load() and .html()

$('button').on('click',  function() {
    $('#insertion-point').load('this-WP_query-loop-chunk.php');
});
4
  • Yeah use ajax - sounds like a solid plan. you can also use is_mobile() to detect if you need to even run the script / give the option or not. This seems like a solid tutorial you may be able to start there.
    – Howdy_McGee
    Apr 23, 2014 at 5:00
  • Please add the code you already have and explain why it is not working. Apr 23, 2014 at 5:20
  • Start with AJAX in Plugins, and read some of the questions here tagged ajax. You can't load a php file directly, WordPress functions will not exist, that's why WordPress has an AJAX API.
    – Milo
    Apr 23, 2014 at 21:40
  • I am switching the front end to angular.js - so in this case, I was looking for something quick because sooner than later, I'll be doing it all differently. Apr 23, 2014 at 21:52

1 Answer 1

1

So instead of loading a loop on click, I loaded the loop as usual, but instead of loading the images, I retrieved their URL's and collected them in a data attribute. Then, I have that handy in the loop already without actually loading the images (who's weight was the real issue).

On click, or any event - I then give that stored string to the src attribute of the img

This got my page load from 14mb to 1.2mb.

HTML / PHP whatever

// start loop // WP_Query

<div class="slideshow-image"
    <img
    data-image-url="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>"
    src="<?php bloginfo('template_directory'); ?>/images/blank.gif" 
    alt="slideshow image" />
</div>

// end loop


jQuery

// load slideshow image only after you click
$("#porthole-slideshow-link").on('click', function() {

  $('.slideshow-image img').each( function() {

    var imageUrl = $(this).attr("data-image-url");
    $(this).attr('src', imageUrl);

  });

});

more:

I put this idea into action on many more things not in the loop so I could load only the most important assets and then after DOM load, things like the social buttons (which are big in this case) after the site structure is all done.

HTML

<img
class="load-me-after-dom"
data-image-url="http://example.com/images/my-huge-image.png"
src="http://example.com/images/blank.gif"
alt="my description" />

jQuery

$('.load-me-after-dom').each( function() {
  var imageUrl = $(this).attr("data-image-url");
  $(this).attr('src', imageUrl);
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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