0

I would like to have an image appear on the screen immediately and then fade out and display a webpage so it appears to fade into the webpage. For some reason I am getting strange results I am not an expert in jQuery but I feel I might be close to what I want. Here is a fiddle

$(".splash").delay(2000).fadeOut(2000, function() {
    $( "#result" ).load( "http://google.com" ).fadeIn(2000);
});

Basically it should display the cat for 2 seconds and then fade into the Google website.

Yamaha32088
  • 4,125
  • 9
  • 46
  • 97
  • 1
    'http://google.com' does not permit you to 'load' its content (ajax) to present as your own. – Rob Sedgwick Mar 11 '14 at 15:07
  • you cannot use `.load()` to make cross domain request. BTW, looks like you should use `load()` callback to fadeIn() element. So are you really targeting `google.com`, if ya, even this site cannot be displayed in iframe so... – A. Wolff Mar 11 '14 at 15:08
  • From the jQuery documentation: "Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol." – CREEATION Mar 11 '14 at 15:09
  • http://jsfiddle.net/Uj9hZ/3/ - shows nothing wrong with your logic – Rob Sedgwick Mar 11 '14 at 15:10
  • @RobSedgwick but `load()` is async – A. Wolff Mar 11 '14 at 15:12
  • You need to do the `fadeOut` during the `load` callback, not the other way round, so it will load the contents and then fade out the image. Also, what they all said above about cross domain calls not being allowed. – Reinstate Monica Cellio Mar 11 '14 at 15:14
  • @A.Wolff - sure thing - the example just showing how the `fade` logic is fine - but yeah, needs the callback on load ( if they want the fade to happen *after* contents finally *loaded* ) – Rob Sedgwick Mar 11 '14 at 16:34

3 Answers3

2

You can do this iFrame or object tag like this :

$(".splash").delay(2000).fadeOut(2000, function() {
    $( "#result" ).html('<object data="http://tired.com/">').fadeIn(2000);
});

Result : http://jsfiddle.net/G2RhJ/3/

Volkan
  • 41
  • 1
  • 6
1
  1. You can't load external urls using .load due to JavaScript's Same Origin Policy. for more details check out this link.

  2. For your code if your try this for some local url, this should work.

    $(".splash").fadeOut(2000, function() { $( "#result" ).load("/localpage.html" ); });

Rajesh Dhiman
  • 1,888
  • 1
  • 17
  • 30
0

I think you can't use a div tag to display another website, not even with jQuery ;-)

Another point is that the load() function works with local URLs like "dir/script.php" only.

As far as I know the only way to achieve your task is to use a frame / iframe. It has already been done here: How do I load an url in iframe with Jquery

Maybe this works for you (untested):

<div id="imageContainer">
<img class="splash" src="http://placekitten.com/1920/1080">
</div>
<div id="mydiv"><iframe id="frame" src="" width="100%" height="300">
</iframe></div>

$(".splash").delay(2000).fadeOut(2000, function() {
$("#frame").attr("src", "http://www.google.com").fadeIn(2000);
});
Community
  • 1
  • 1
user3249755
  • 13
  • 3