Animate Load when clicking

Question

Animate Load when clicking

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

How do I animate Load as soon as I load?

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

<!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

asked by anonymous 21.10.2015 / 13:50

3 answers

Doubts database / batch control system There is the possibility of putting a specific CSS in Bootstrap for a size

score 1 · Answer 1

Do you want a loading animation while loading the content?

If so, I would do the following. I would call the BlockUI before calling the load and on the error callback and succeed sending it to hide.

BlockUI - very useful. link

Maybe, to be nice, make a promisse in this load, to hide the blockUI directly after the loading, to have no problem with the loading time X events.

The internal loading, you can do N-shapes, with gif, with webfont, image, rotate with css, that's your choice.

score 0 · Answer 2

1 - How do I animate Load as soon as I load?

In my tests I tried to use only the fadeIn () is did not result in anything, I put a hide () before and managed to make the transition effect.

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

It has, everything will depend on your need, in that 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 by 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><buttonid="link-1">Buscar Inforamções de outro html</button>
<div id="resposta"></div>

Stack Snippet does not allow you to load an external page, so check out the code working here: JSFIDDLE

If you need something more neat to look at this article: Collection of page transitions .

score 0 · Answer 3

So if you have 30 links, they will all render it.

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 load of the html is ready it switches automatically.

You can also do something 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 jquery .load () has a callback that is called when the load is complete, in this event you unBlockUI.

Here's an example of this working here .