2

所以我正在建立一个网站，将在鼠标悬停时使用大量动画 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？还是一般更好的方法？

4

3 回答 3

3

您需要通过分隔符逗号将 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：

<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>
于 2012-01-30T21:53:14.037 回答
1

为什么不直接将列表放入 Js 数组中呢？

就像是 ：

<script>
    var aPreloadImages = <?php echo preloadImages(); ?>;

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

还有你的 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 json_encode($images);
}
于 2012-01-30T21:54:44.607 回答
1

让您的 php 将数据作为实际数组返回给元素，并以[]. 然后，当您使用 .data() 方法从数据属性中提取它时，jquery 会将其转换为真正的数组。

div

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

代码

var images = jQuery(this).data('preload');
于 2012-01-30T21:58:22.987 回答