0

How can I make a hidden div activate (or unhide) If a certain Div is taking longer than 30 seconds to completely load all elements within it?

I can't figure out a code.

We Diamond Few
  • 15
  • 3
  • 2
    Do you mean like an ajax call is taking too long to get the results back or the html in the div is so huge the browser is taking 30+seconds to render it? – Danny May 12 '17 at 16:39
  • Load what and how? Images? Content via AJAX? – empiric May 12 '17 at 16:39
  • @danny no. It's just a div with a number of images that are bigger than usual. But yes for some viewers it can take 30+ seconds to load them. I want to have a div appear above the images if this occurs – We Diamond Few May 12 '17 at 17:07
  • @WeDiamondFew Would something like this help: http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached – Danny May 12 '17 at 17:09
  • Well actually it might, but wouldn't that mean I'd need to repeat the code for every single Img src? – We Diamond Few May 12 '17 at 17:43
  • You could put a page loader set to window.load so it only disappears after all the images are loaded, no matter how long the loading takes (the 30 secs doesn't matter in this case). – Nathaniel Flick May 12 '17 at 19:27

1 Answers1

1

Assuming your HTML looks something like this

<body>
    <img src="...">
</body>

you could do something like this:

<body>
    <script type="text/javascript">slowTimer = setTimeout(function() { $("#slowLoadingDiv").show(); }, 30000)</script>;
    <img src="...">
    <script type= "text/javascript">clearTimeout(slowTimer);</script>
</body>

Basically, before your "slow loading" code, you start a timer, and when it fires you do something. After the DOM loads, you cancel said timer.

AnilRedshift
  • 7,937
  • 7
  • 35
  • 59
  • Yeah it's something similar to this. I'm making a gallery for my school with bigger than usual images. Regardless of how long the images in the div take to load I don't want them be touched or changed. The plan is to have a div appear above the gallery with a button that says "optimize" if the images are loading too slow for the viewer. but I don't want the div to appear unless necessary – We Diamond Few May 12 '17 at 17:04