php - 使用 PHP 和 jQuery 预加载图像 - 逗号分隔数组？

Question

所以我正在建立一个网站，该网站将在鼠标悬停时使用大量动画 GIF。将会有很多图像，我只想加载将在任何给定页面上使用的图像。它使用 WordPress，因此我可以使用条件标签仅在特定页面上输出我需要的图像的 URL。

我的问题是如何告诉浏览器/服务器哪些图像需要预加载。我决定向包含元素添加 HTML5 数据属性。

例如，我将有一个包含此 PHP 的 DIV:

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

这会在 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:

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 呢？或者一般来说更好的方法？

Answer 1

您需要将 URL 字符串用分隔符逗号分割成一个数组:

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

jQuery(this).data('preload') 返回一个字符串，您可以使用 .split() 将该字符串拆分为数组:https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Split

您还可以使用 $.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 中分隔不同 URL 的逗号之外，您不应使用任何其他内容:

<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>