使用PHP和jQuery preloading图像 - 逗号分隔的数组? [英] Preloading images using PHP and jQuery - Comma seperated array?
问题描述
所以我建立一个网站,将使用大量GIF动画的的鼠标悬停。将有大量的图片,我只想要加载,将任何给定的页面上使用的图像。它使用Word preSS所以我可以使用条件标签来只放了,我需要的某一页上的图像的URL的。
So I'm building a website that will use a lot of animated GIF's on mouse hover. There will be a lot of images, and I only want to load the images that will be used on any given page. It's using WordPress so I can use the conditional tags to only put out the URL's of the images I need on a certain page.
我的问题是如何分辨哪些图像需要的是preloaded浏览器/服务器。我决定一个HTML5数据属性添加到包含的元素。
My problem was how to tell the browser/server which images needed to be preloaded. I decided to add a HTML5 data attribute to the containing element.
例如,我将有一个DIV与此PHP中的:
For example, I would have a DIV with this PHP in it:
<div id="home-container" class="preload" data-preload="<?php echo preloadImages(); ?>"></div>
这将调用该函数在PHP中:
Which would 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);
}
所以输出会是这样的:
So the output would be this:
<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>
然后我运行这段JavaScript:
And then I run this JavaScript:
jQuery('.preload').each(function(){
var images = [
// Comma seperated list
jQuery(this).data('preload')
];
jQuery(images).each(function() {
jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide();
});
});
问题是,JavaScript的不喜欢逗号分隔的列表。如果我只是在写的网址,它工作正常。那么,有没有更好的办法在这些网址通过?或一般的更好的办法?
The problem is that the JavaScript does not like the comma separated list. If I just write in the URLs, it works fine. So is there a better way to pass in those URLs? Or a better way in general?
谢谢!
推荐答案
您需要的deliminator逗号分割的URL字符串到一个数组:
You need to split the string of URLs by the deliminator commas into an array:
var images = jQuery(this).data('preload').split(',');
的jQuery(本)。数据('preLOAD')
返回一个字符串,你可以使用 .split()
到字符串分割成一个数组:的https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Split
jQuery(this).data('preload')
is returning a string, and you can use .split()
to split that string into an array: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Split
你也可以让你的循环运行快一点通过使用 $每()
:
Also you can make your loop run a little faster by 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();
});
});
请注意,你不应该有比在数据属性分开不同的URL逗号以外的任何
:
Note that you shouldn't have anything other than the commas that separate the 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>
这篇关于使用PHP和jQuery preloading图像 - 逗号分隔的数组?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!