Animate Load by clicking

Asked

Viewed 749 times

0

How do I animate Load once it loads?

Is there any way to optimize this code? For example if I have on page 30 links.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#link-1").click(function(){
        $("#div1").load("teste.html").fadeIn('1500');
    });

    $("#link-2").click(function(){
        $("#div1").load("teste-2.html").fadeIn('1500');
    });

});
</script>
</head>
<body>






<button id="link-1">Get External Content</button>
<button id="link-2">Get External Content</button>


<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>


</body>
</html>
jquery

3 answers

1

You want loading animation while loading content?

If that’s the case, here’s what I’d do. I would call the Blockui before calling the load and in the error callback and have Success hide.

Blockui - very useful. http://malsup.com/jquery/block/

Maybe, to be cool, make a promise in this load, to hide the blockUI directly after the loading, not to have problem with the loading time X events.

The internal loading, you can make of N shapes, with gif, with Webfont, image, have rotated with css, there is your choice.

0

1 - How do I animate Load when loading?

In my tests I tried to use only fadein() and it did not result in anything, I put an Hide() before and managed to make the transition effect.

2 - Is there any way to optimize this code? For example if I have on the pages 30 links.

Has, everything will depend on your need, in which case if you want to perform the same action in 30 different urls, why not do a function ?

I made an example, just pass the url to the function it will load doing the Fadein transition effect().

 $("#link-1").click(function() {
   animaLoad("http://fiddle.jshell.net/kjt771nh/show/");
 });

 function animaLoad(url) {
   $("#resposta").hide().load(url).fadeIn(1500);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<button id="link-1">Buscar Inforamções de outro html</button>
<div id="resposta"></div>

Stack Snippet does not allow loading an external page, so see the code working here : JSFIDDLE

If you need a more fanciful thing to look at in this article: Collection of page Transitions.

0

So if you have 30 links, they will all render in the same .

You can do the following.

<script>
  $('#content').html('<img src="myLoading.gif">');
  $('#content').load("http://www.uol.com.br");
</script>
<div id="content"></div>

With this the loading will appear and when the html load is ready it changes automatically.

you can also do something even cooler, with blockUI

<script>
  $.blockUI({ message: '<img src="myLoading.gif" />' });
  $('#content').load("http://www.uol.com.br",function(){$.unblockUI();});
</script>
<div id="content"></div>

The .load() jquery has a callback that is called when the upload is complete, in this event you give unBlockUI.

Here’s an example of this working here.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.