chasethemetal Posted November 28, 2011 Share Posted November 28, 2011 Hey all, I'm trying to create a jQuery script that will display a loading gif in a div until the contents of that div are loaded. I've successfully done this using the body onload function, but I need this to work on div's through out a page. I can't come up with a good solution. these are my thoughts, and I know there isn't a .onload() and I know this doesn't work but this should illustrate what I'm trying to accomplish. $('#loading').show();$('#content').onload(function(){$("#loading").hide();}); Any help would be appreciated!!! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 29, 2011 Share Posted November 29, 2011 use position absolute for gif image, within a position relative container, use z-index to place it under content layer with a background-color, when this loads it will be above the gif image and hide it from view. $(document).ready(function() {$("div").prepend(function(){$(this).prepend($('<img src="bimages/loader.gif" />').delay(6000).fadeOut());});}); this will load the loader gif in all div elements, and after 6 sec fadeout this loader image to display:none; Link to comment Share on other sites More sharing options...
chasethemetal Posted November 29, 2011 Author Share Posted November 29, 2011 Thanks! That method seems a little too hacky work around. With this method the time the loading GIF being displayed isn't dynamic and dependent on the time in which it takes to load that particular div. Let us take a situation where graphs are being loaded into a div, depending on someones internet connection it could take 3 to 15 seconds to load a graph. I wouldn't want to wait longer, and I wouldn't want the image to disappear pre maturely. In a perfect world, onload could be called on any container element not just <body>. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 29, 2011 Share Posted November 29, 2011 Then you could try something like this function waitforit(){$("#content").load(function() {$(this).prev("#loading").hide();});} the problem here is you have to run this, after the content starts loading, as you can't run it before, as it does exist yet, unless you create the image/content on page loading using jquery and run it after it is created. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.