i loading external website (my own) using 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> as can see right now, loading spinner gif inside div , replacing content of div external website html, replacing on moment downloading website can make wait untill website downloaded , replace html ?
by way, .load method not working me reason =\
your object replaces content of div @ document.ready. should done when object loaded.
<script> $( document ).ready(function() { //$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">'); syntax errors here //this doesn't work $('<object "width:100%; height:2000px; data="http://example.com/findex.php">') .load(function(){ $("#siteloader").empty().append(this); }); }); </script> fixed working 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 work 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> i hope work data well. looks ugly (mix jquery , pure js) found way make work. $(obj).appendto('#siteloader') triggers load.
in case, php used:
<?php usleep(10000000); echo '{"name":"qwas","qty":10,"curr":"'.date('h:i:s').'"}'; ?> 