如何在jQuery.html(<object data=“.html)中添加旋转器

Question

我使用Jquery加载外部网站(我自己的)。

<div id="siteloader"><center>
<img style="width: 100px; height: 100px;" src="http://seafood.greenpeaceusa.org/images/spinner.gif" alt="Mountain View" /></center></div>
​
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
$( document ).ready(function() {
   $("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">');
});
</scirpt>

正如您现在所看到的，我正在div中加载spinner并用外部网站html替换div的内容，但是它在下载网站时正在替换它，我能让它等到网站被下载后才替换html吗？

顺便说一句，由于某种原因，.load方法不适合我。

Answer 1

您的object在document.ready代替div的内容。它应该在加载对象时完成。

<script>
$( document ).ready(function() {
   //$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">'); syntax errors here
   //this doesn't work as well
   $('<object "width:100%; height:2000px; data="http://example.com/findex.php">')
      .load(function(){
          $("#siteloader").empty().append(this);
      });
});
</script>

固定工作脚本：

    <script>
$( document ).ready(function() {
    /*
    //wrong again spinner disappear before object loaded
    $('<object style="width:100%; height:400px; display:none;" data="http://www.w3schools.com/tags/helloworld.swf" />')
        .appendTo($("#siteloader"))
        .after(function () {
          console.log('loaded');
          $(this).show().siblings().each(function () {
              $(this).remove();
          });
      });
    */
        //and this work for sure
        var obj = document.createElement('object');
        obj.onload = function () {
            console.log('loaded');
            $(this).css({ width: '100%', height: '400px' }).show()
                .siblings().each(function () {
                    $(this).remove();
                });
        };
        obj.data = 'json.php';
        $(obj).appendTo('#siteloader');

});
    </script>

我希望它也能和你的数据一起工作。这看起来很难看(混合jquery和纯JS)，但这是唯一能让它工作的方法。$(obj).appendTo('#siteloader')触发负载。

以防万一，PHP使用：

<?php
usleep(10000000);
echo '{"name":"qwas","qty":10,"curr":"'.date('h:i:s').'"}';
?>