Geek Answers Handbook

Preloading images using PHP and jQuery - a semicolon array?

So, I am creating a website that will use a lot of animated GIFs on hover. There will be many images, and I only want to upload images that will be used on any given page. It uses WordPress, so I can only use conditional tags to indicate the URL of the images I need on a particular page.

My problem was how to tell the browser / server which images to preload. I decided to add an HTML5 data attribute to the contained element.

For example, I would have a DIV with this PHP in it:

<div id="home-container" class="preload" data-preload="<?php echo preloadImages(); ?>"></div>

To call this function in PHP:

 function preloadImages() { global $post; $templateURL = get_template_directory_uri(); $images = array(); if( is_page('test') ) $images[] = "'".$templateURL."/images/gifs-static/button-info-tab-close-off.gif'"; $images[] = "'".$templateURL."/images/gifs-animated/button-info-tab-close.gif'"; } return implode(", ", $images); }

Thus, the output will be as follows:

 <div id="home-container" class="preload" data-preload="'http://example.com/images/gifs-static/button-info-tab-close-off.gif', 'http://example.com/images/gifs-animated/button-info-tab-close.gif'"></div>

And then I run this JavaScript:

 jQuery('.preload').each(function(){ var images = [ // Comma separated list jQuery(this).data('preload') ]; jQuery(images).each(function() { jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide(); }); });

The problem is that JavaScript does not like comma-separated list. If I just write in the urls it works fine. So is there a better way to pass these URLs? Or is there a better way at all?

+2
source share
3 answers

You need to split the URL string with comma delimiters into an array:

  var images = jQuery(this).data('preload').split(',');

jQuery(this).data('preload') returns a string, and you can use .split() to split this string into an array: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Split

You can also make the loop faster using $.each() :

 jQuery('.preload').each(function(){ var images = [ // Comma seperated list jQuery(this).data('preload') ]; jQuery.each(images, function() { jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide(); }); });

Note that you should have nothing but commas that separate different urls in the data-attribute :

 <div id="home-container" class="preload" data-preload="http://example.com/images/gifs-static/button-info-tab-close-off.gif,http://example.com/images/gifs-animated/button-info-tab-close.gif"></div>
+3
source

Why don't you put the list directly in a Js array?

Sort of:

 <script> var aPreloadImages = <?php echo preloadImages(); ?>; for (index in aPreloadImages) { jQuery('<img />').attr('src', aPreloadImages[index]).addClass('preloaded').appendTo('body').hide(); } </script>

And your PHP code:

 function preloadImages() { global $post; $templateURL = get_template_directory_uri(); $images = array(); if( is_page('test') ) $images[] = "'".$templateURL."/images/gifs-static/button-info-tab-close-off.gif'"; $images[] = "'".$templateURL."/images/gifs-animated/button-info-tab-close.gif'"; } return json_encode($images); }
+1
source

Make your php return the data to the element as an actual array wrapped in [] . Then, when you extract it from the data attribute using the .data () method, jquery converts it to a real array.

Div

 <div class="preload" data-preload='["foo.jpg","bar.jpg","foobar.gif","barfoo.png"]'></div>

code

 var images = jQuery(this).data('preload');
+1
source

More articles:


All Articles