jQuery .load停止页面中嵌入的视频/重新加载整个页面。

Question

我有一个关于使用jQuery的.load重新加载div的问题。代码如下：

    <h1>Official Live-Stream</h1>
    <object width="560" height="315" data="http://www.dailymotion.com/embed/video/x10sbxw"></object>
    </br>
    </br>

    <script>
        (function($)
        {
            $(document).ready(function()
            {
                $.ajaxSetup(
                {
                    cache: false,
                    beforeSend: function() {
                        $('#content').hide();
                        $('#loading').show();
                    },
                    complete: function() {
                        $('#loading').hide();
                        $('#content').show();
                    },
                    success: function() {
                        $('#loading').hide();
                        $('#content').show();
                    }
                });
                var $container = $("#liveracingblog");
                $container.load("../live/addon/addon_ticker.php");
                var refreshId = setInterval(function()
                {
                    $container.load('../live/addon/addon_ticker.php');
                }, 30000);
            });
        })(jQuery);
    </script>

    <div id="liveracingblog"></div>

我遇到的问题是每30秒不仅liveracingblog-div会重新加载，整个页面也会重新加载，这使得嵌入在第二行的视频停止播放。

您可以在此处观察问题：http://www.racingblog.de/racingbloglive/（该代码是Wordpress页面模板的一部分，但我认为这并不重要）

如何解决这个问题？

- janw

---

你尝试过使用$.get()吗？替换成以下代码：$.get("../live/addon/addon_ticker.php",function(content){$container.html(content);}); - A. Wolff

我将 $container.load('../live/addon/addon_ticker.php'); 改为 $.get("../live/addon/addon_ticker.php",function(content){$container.html(content);});（我想这就是你的意思）。但问题仍然存在... - janw

是的，那就是我想说的。如果您将视频替换为图像，是否仍然存在相同的问题？这是为了测试Flash对象是否会导致此行为。 - A. Wolff

好的，我已经用一张图片替换了Flash对象，但我仍然可以看到这张图片每30秒重新加载。 - janw

我不了解WordPress，但它可能与此有关。也许尝试将脚本标签放在头部，但说实话，我不知道发生了什么。 - A. Wolff

Answer 1

我查看了页面，发现 #content div 包含嵌入式视频，而你在 js 中隐藏和显示它。你只想要隐藏和显示 #liveracingblog div

以下更改应该可以解决问题：

         $.ajaxSetup(
            {
                cache: false,
                beforeSend: function() {
                    $('#liveracingblog').hide();
                    $('#loading').show();
                },
                complete: function() {
                    $('#loading').hide();
                    $('#liveracingblog').show();
                },
                success: function() {
                    $('#loading').hide();
                    $('#liveracingblog').show();
                }
            });

我还注意到每30秒从数据库中检索出了大量记录，因为您正在使用load()方法，所以任何向下滚动的用户都将返回到此div的顶部。我建议完全忘记隐藏divs。相反，用$get替换load()以返回任何新记录（自上次请求以来），然后将这些新记录前置到#liveracingblog div。

无论哪种方式，祝你好运，并让我知道是否需要更多解释。Adrian

- Adrian Trainor