使用PHP和jQuery预加载图像-逗号分隔的数组? [英] Preloading images using PHP and jQuery - Comma separated array?

问题描述

因此，我正在建立一个网站，它将在鼠标悬停时使用很多GIF动画.会有很多图像，我只想加载将在任何给定页面上使用的图像.它使用的是WordPress，因此我可以使用条件标签仅在特定页面上显示所需图像的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.

我的问题是如何告诉浏览器/服务器哪些图像需要预加载.我决定将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.

例如，我将在其中装有该PHP的DIV:

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);
}

所以输出将是这样:

<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 separated list
            jQuery(this).data('preload')
        ];

        jQuery(images).each(function() {
            jQuery('<img />').attr('src', this).addClass('preloaded').appendTo('body').hide();
        });
});

问题是JavaScript不喜欢以逗号分隔的列表.如果我只写URL，它就可以正常工作.那么，有没有更好的方法来传递这些URL?还是总体上更好的方法?

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?

推荐答案

您需要使用分隔符将URL字符串拆分为一个数组:

You need to split the string of URLs by the deliminator commas into an array:

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

jQuery(this).data('preload')返回一个字符串，您可以使用.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

另外，您可以使用$.each()使循环运行得更快:

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();
        });
});

请注意，除了用于分隔data-attribute中不同网址的逗号之外，您不应有其他任何内容:

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预加载图像-逗号分隔的数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！