【问题标题】：JQuery AJAX Navigation using load() reload resources several times (audio)使用 load() 多次重新加载资源的 JQuery AJAX 导航（音频）
【发布时间】：2015-03-26 14:22:50
【问题描述】：

我正在使用 JQuery load() 函数（$.ajax() 的包装器）来获取确定的 DIV 的内容。

但是我遇到了下一个问题； load() 获取（并加载，显然）音频和视频等资源；因此页面无法正常运行。

我正在使用下一个代码：

var container =  $("#container"), url = "mydomain.com/page2/ #content";

container.load(url, function(data) {
    // Set the new title.
    document.title = $(data).filter('title').text();
});

总结：

每次用户浏览页面时，音频都会作为 GET 请求重新加载。

音乐重叠，同时响起……

我要检索其内容的页面的表示（我将只使用#content 中的 HTML）：

<!DOCTYPE html>
<html>
    <head>  
        <title>Title of the page</title>  
    </head>
    <body>

       <div id="content"> Hello <b>world</b> this is the content I want to get.</div>

       <audio autoplay loop preload="auto">
           <source src="mydomain/wp-content/themes/mytheme/resources/audio/road.mp3" type="audio/mpeg"/> 
           <source src="mydomain/wp-content/themes/mytheme/resources/audio/road.ogg" type="audio/ogg"/> 
       </audio>

    </body>
</html>

任何人都知道如何避免#content 之外的资源负载（至少是音频）？

【问题讨论】：

存储在本地存储中。
@Nit 我不明白 HTML5 localStorage 对我有什么帮助...请您再解释一下好吗？
当您需要您的数据时，请检查您之前是否存储在本地存储中。如果有，请从那里获取它，而不是 Ajaxing。如果它不存在，则对其进行 Ajax 处理并将其存储在那里，以便下次您不必 Ajax 处理它。
@Nit 问题是我不想随时通过 AJAX 接收音频；我只想要特定 div (#content) 的 HTML 内容。但是由于某种原因，我还加载了音频资源...
让我把你说对了。您想加载
的内容而没有它下面的音频，不是吗？你想用容器 id 将它加载到 div 中，不是吗？

标签： javascript jquery ajax wordpress jquery-load

【解决方案1】：

jQuery 代码

$(document).on('click', 'a[rel*=charger_partiel]', function(f) { 

f.preventDefault();

var myId_to_update_here = $(this).data('ajax'); 

var myId_to_load_from_other_page = $(this).data('direction');       

    var afficher_chargement = $(this).data('icon');

    var chargement_devant_lien = $(this).data('filter');

    var image_de_chargement = '<img src="images/facebook_style_loader.gif" />';



    if(chargement_devant_lien!='')
    {
        $('#'+chargement_devant_lien).html(image_de_chargement);
    }
    //Fin de l'affichage du chargement si l'id du span du devant lien est mis   


    if(afficher_chargement=='Oui')
    {
        $('#'+myId_to_update_here).html(image_de_chargement);
    }
    //Fin de l'affichage du chargement si le data-icon='Oui'




  $('#'+myId_to_update_here).load($(this).attr('href')+' #'+myId_to_load_from_other_page




  , function(responseText, textStatus, XMLHttpRequest) {
            if(textStatus == 'error') {
                $('#'+myId_to_update_here).html('<p>Oupps.. There was an error making the AJAX request. Maybe your internet connection is slowing down.</p>');
            }
        });



        if(chargement_devant_lien!='')
    {
        $('#'+chargement_devant_lien).html('');
    }
    //Fin de l'affichage du chargement si l'id du span du devant lien est mis



  return false;
});

现在的 HTML

您现在要做的就是设置参数，如果您的 div 在每个页面上都可以正常工作

<a href="mypage.php" rel="charger_partiel" data-direction="content"    data-ajax="container">charger_partiel</a>

取决于您所在的页面以及您想要从哪个页面加载和到哪个页面

<a href="mypage.php" rel="charger_partiel" data-direction="container"    data-ajax="content">charger_partiel</a>

Mypage.php 是您要从中加载信息的页面（不是您所在的页面）

数据方向显示你想从哪里加载它（div）

和你想要加载到的数据 ajax

这是基于 jquery 的最新版本。如果您没有使用最新版本，则必须直接点击而不是点击。

【讨论】：

和我的功能完全一样；仍在加载audio 资源。我不知道load()会发生什么...
萤火虫中是否显示任何错误？如果您有萤火虫检查错误并告诉我。可能是另一个干扰 jquery 的脚本
不，他没有显示任何错误，就像我自己的脚本一样。但是音频资源被重新加载
你能把这两个页面的在线演示放在网上，这样我就可以检查了，因为它正在我这边工作

【解决方案2】：

嗯，比如load()函数重新加载资源比如audio，我在第二页实现了一个控件，用于检查请求是否为AJAX请求：

// Code of the "page.php" file.

$Is_AJAX = !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' ? true : false;

// If is an AJAX request we don't need the header
if(!$Is_AJAX) get_header(); ?>

<div id="container">
    <div  id="content">
    <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', 'page' ); ?>

        <?php
            if ( comments_open() || '0' != get_comments_number() )
                comments_template();
        ?>

    <?php endwhile; ?>
    </div>
</div>

// If is an AJAX request we don't need the header (the audio resources are in the footer).
<?php if(!$Is_AJAX) get_footer(); ?>

通过这种方式，我们也获得了最快的页面加载，因为只有我们获得了所需页面的内容（忽略 Wordpress 主题的 header.php 和 footer.php em>)。

我看到他的唯一缺点是我无法获取请求页面的标题（因为它在标题中），但我创建了一个隐藏的div，其中包含标题解决这个问题的每个页面：

// This code goes in the "page.php" file.
<div class="hidden" id="title_Page"><?php wp_title('|', true, 'right'); ?></div>

【讨论】：