load gif until page is fully load
up vote
-1
down vote
favorite
I want to display a gif image until the website is completely loaded.
Once I click button (onclick=window.open) a new page opened but is blank and the gif is only appearing once the website is loaded.
I want once clicking the button a new page opened and showing immediately the gif and disappear once the page is loaded
Can anyone help me, what I’m doing wrong or what is missing to load the gif when the page is loading? Here is my code, thank you so much
land.php file:
<button type="button"
onClick="window.open('./gremo.cfm ',
toolbar=no,
menubar=no,
scrolling=yes,
scrollbars=yes
')">
</button>
gremo.php file:
<head>
<script type="text/javascript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
window.onload = function () { reSizeTextarea(); showHide('loadingd'); }
</script>
</head>
<body>
<div id="loadingd" align="center">
<br/><br/><br/><img src="./loading.gif">
</div>
</body>
javascript jquery
asked Nov 19 at 18:50
alex85
33
|
show 7 more comments
up vote
-1
down vote
favorite
I want to display a gif image until the website is completely loaded.
Once I click button (onclick=window.open) a new page opened but is blank and the gif is only appearing once the website is loaded.
I want once clicking the button a new page opened and showing immediately the gif and disappear once the page is loaded
Can anyone help me, what I’m doing wrong or what is missing to load the gif when the page is loading? Here is my code, thank you so much
land.php file:
<button type="button"
onClick="window.open('./gremo.cfm ',
toolbar=no,
menubar=no,
scrolling=yes,
scrollbars=yes
')">
</button>
gremo.php file:
<head>
<script type="text/javascript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
window.onload = function () { reSizeTextarea(); showHide('loadingd'); }
</script>
</head>
<body>
<div id="loadingd" align="center">
<br/><br/><br/><img src="./loading.gif">
</div>
</body>
javascript jquery
asked Nov 19 at 18:50
alex85
33
3
well seems about right since only thing to load is the image so as soon as it loads, window.onload fires.
– epascarello
Nov 19 at 18:53
1
You can delayshowHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms
– darklightcode
Nov 19 at 18:55
@epascarello, thank you but what i can do, that the gif is loading during the page is loading and disappear once the page is loaded ?
– alex85
Nov 19 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 at 19:04
|
show 7 more comments
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I want to display a gif image until the website is completely loaded.
Once I click button (onclick=window.open) a new page opened but is blank and the gif is only appearing once the website is loaded.
I want once clicking the button a new page opened and showing immediately the gif and disappear once the page is loaded
Can anyone help me, what I’m doing wrong or what is missing to load the gif when the page is loading? Here is my code, thank you so much
land.php file:
<button type="button"
onClick="window.open('./gremo.cfm ',
toolbar=no,
menubar=no,
scrolling=yes,
scrollbars=yes
')">
</button>
gremo.php file:
<head>
<script type="text/javascript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
window.onload = function () { reSizeTextarea(); showHide('loadingd'); }
</script>
</head>
<body>
<div id="loadingd" align="center">
<br/><br/><br/><img src="./loading.gif">
</div>
</body>
javascript jquery
asked Nov 19 at 18:50
alex85
33
I want to display a gif image until the website is completely loaded.
Once I click button (onclick=window.open) a new page opened but is blank and the gif is only appearing once the website is loaded.
I want once clicking the button a new page opened and showing immediately the gif and disappear once the page is loaded
Can anyone help me, what I’m doing wrong or what is missing to load the gif when the page is loading? Here is my code, thank you so much
land.php file:
<button type="button"
onClick="window.open('./gremo.cfm ',
toolbar=no,
menubar=no,
scrolling=yes,
scrollbars=yes
')">
</button>
gremo.php file:
<head>
<script type="text/javascript">
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
window.onload = function () { reSizeTextarea(); showHide('loadingd'); }
</script>
</head>
<body>
<div id="loadingd" align="center">
<br/><br/><br/><img src="./loading.gif">
</div>
</body>
javascript jquery
javascript jquery
asked Nov 19 at 18:50
alex85
33
asked Nov 19 at 18:50
alex85
33
edited Nov 19 at 21:03
asked Nov 19 at 18:50
alex85
33
asked Nov 19 at 18:50
alex85
33
asked Nov 19 at 18:50
alex85
33
33
3
well seems about right since only thing to load is the image so as soon as it loads, window.onload fires.
– epascarello
Nov 19 at 18:53
1
You can delayshowHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms
– darklightcode
Nov 19 at 18:55
@epascarello, thank you but what i can do, that the gif is loading during the page is loading and disappear once the page is loaded ?
– alex85
Nov 19 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 at 19:04
|
show 7 more comments
3
well seems about right since only thing to load is the image so as soon as it loads, window.onload fires.
– epascarello
Nov 19 at 18:53
1
You can delayshowHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms
– darklightcode
Nov 19 at 18:55
@epascarello, thank you but what i can do, that the gif is loading during the page is loading and disappear once the page is loaded ?
– alex85
Nov 19 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 at 19:04
3
3
well seems about right since only thing to load is the image so as soon as it loads, window.onload fires.
– epascarello
Nov 19 at 18:53
well seems about right since only thing to load is the image so as soon as it loads, window.onload fires.
– epascarello
Nov 19 at 18:53
1
1
You can delay
showHide('loadingd') by putting it in a setTimeout, i dunno, for about 250ms– darklightcode
Nov 19 at 18:55
You can delay
showHide('loadingd') by putting it in a setTimeout, i dunno, for about 250ms– darklightcode
Nov 19 at 18:55
@epascarello, thank you but what i can do, that the gif is loading during the page is loading and disappear once the page is loaded ?
– alex85
Nov 19 at 19:01
@epascarello, thank you but what i can do, that the gif is loading during the page is loading and disappear once the page is loaded ?
– alex85
Nov 19 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 at 19:02
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 at 19:04
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 at 19:04
|
show 7 more comments
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
When you have a lot of content, it will take time to load. The image will show and than hide when the onload event happens. Now run it again, the content is cached and loading will take no time at all.
So load time depends on what there is to load/render, how it is loaded, and if it is cached or not.
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>In your example, you have nothing that takes time to load other than the loading image. So as soon as your image is loaded, the window.onload is triggered. That is why it flashes.
If you want the image to show, you can add some logic saying if I have not been here for X seconds, than wait....
var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>To ensure the loading gif loads fast, on the parent page, you probably want to preload it
var img = new Image()
img.src = "your.gif"
answered Nov 19 at 19:50
epascarello
150k13129178
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
add a comment |
up vote
1
down vote
Note that when you are running locally, resources are loading fast.. very fast
Don't forget to use your developer tools and configure network throttling (to simulate a slower connection). That should simulate a "real" scenario and let you test your code better
Here is a screenshot from chrome... enjoy!
answered Nov 19 at 19:04
ymz
2,6431817
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
When you have a lot of content, it will take time to load. The image will show and than hide when the onload event happens. Now run it again, the content is cached and loading will take no time at all.
So load time depends on what there is to load/render, how it is loaded, and if it is cached or not.
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>In your example, you have nothing that takes time to load other than the loading image. So as soon as your image is loaded, the window.onload is triggered. That is why it flashes.
If you want the image to show, you can add some logic saying if I have not been here for X seconds, than wait....
var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>To ensure the loading gif loads fast, on the parent page, you probably want to preload it
var img = new Image()
img.src = "your.gif"
answered Nov 19 at 19:50
epascarello
150k13129178
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
add a comment |
up vote
0
down vote
accepted
When you have a lot of content, it will take time to load. The image will show and than hide when the onload event happens. Now run it again, the content is cached and loading will take no time at all.
So load time depends on what there is to load/render, how it is loaded, and if it is cached or not.
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>In your example, you have nothing that takes time to load other than the loading image. So as soon as your image is loaded, the window.onload is triggered. That is why it flashes.
If you want the image to show, you can add some logic saying if I have not been here for X seconds, than wait....
var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>To ensure the loading gif loads fast, on the parent page, you probably want to preload it
var img = new Image()
img.src = "your.gif"
answered Nov 19 at 19:50
epascarello
150k13129178
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
When you have a lot of content, it will take time to load. The image will show and than hide when the onload event happens. Now run it again, the content is cached and loading will take no time at all.
So load time depends on what there is to load/render, how it is loaded, and if it is cached or not.
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>In your example, you have nothing that takes time to load other than the loading image. So as soon as your image is loaded, the window.onload is triggered. That is why it flashes.
If you want the image to show, you can add some logic saying if I have not been here for X seconds, than wait....
var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>To ensure the loading gif loads fast, on the parent page, you probably want to preload it
var img = new Image()
img.src = "your.gif"
answered Nov 19 at 19:50
epascarello
150k13129178
When you have a lot of content, it will take time to load. The image will show and than hide when the onload event happens. Now run it again, the content is cached and loading will take no time at all.
So load time depends on what there is to load/render, how it is loaded, and if it is cached or not.
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>In your example, you have nothing that takes time to load other than the loading image. So as soon as your image is loaded, the window.onload is triggered. That is why it flashes.
If you want the image to show, you can add some logic saying if I have not been here for X seconds, than wait....
var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>To ensure the loading gif loads fast, on the parent page, you probably want to preload it
var img = new Image()
img.src = "your.gif"
window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>window.onload = function () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>var startTime = new Date()
window.onload = function () {
var loadTime = new Date()
var diff = loadTime - startTime;
if (diff > 5000) {
toggleLoad()
} else {
window.setTimeout(toggleLoad, 5000 - diff)
}
}
function toggleLoad () {
document.getElementById("loading").remove()
document.querySelector(".content").removeAttribute("hidden")
}[hidden] {
display: none
}
#loading {
width: 300px;
}<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />
<div class="content" hidden>
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/100/100" />
<img src="http://placekitten.com/300/300" />
<img src="http://placekitten.com/400/400" />
<img src="http://placekitten.com/500/500" />
</div>answered Nov 19 at 19:50
epascarello
150k13129178
edited Nov 19 at 20:12
answered Nov 19 at 19:50
epascarello
150k13129178
answered Nov 19 at 19:50
epascarello
150k13129178
answered Nov 19 at 19:50
epascarello
150k13129178
150k13129178
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
add a comment |
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
thank you epascarello !! your solution is very good, when i open the a new page clicking the button the page is still blank and the gif is not displaying, only once the content is loaded... how can make the possible that the gif is displaying once i click the button...
– alex85
Nov 19 at 20:21
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
If it does not show up, than it is an issue with how you are adding the loading GIF... Your example should be fine, guessing what is in your post does not equal what you actually have.
– epascarello
Nov 19 at 20:28
add a comment |
up vote
1
down vote
Note that when you are running locally, resources are loading fast.. very fast
Don't forget to use your developer tools and configure network throttling (to simulate a slower connection). That should simulate a "real" scenario and let you test your code better
Here is a screenshot from chrome... enjoy!
answered Nov 19 at 19:04
ymz
2,6431817
add a comment |
up vote
1
down vote
Note that when you are running locally, resources are loading fast.. very fast
Don't forget to use your developer tools and configure network throttling (to simulate a slower connection). That should simulate a "real" scenario and let you test your code better
Here is a screenshot from chrome... enjoy!
answered Nov 19 at 19:04
ymz
2,6431817
add a comment |
up vote
1
down vote
up vote
1
down vote
Note that when you are running locally, resources are loading fast.. very fast
Don't forget to use your developer tools and configure network throttling (to simulate a slower connection). That should simulate a "real" scenario and let you test your code better
Here is a screenshot from chrome... enjoy!
answered Nov 19 at 19:04
ymz
2,6431817
Note that when you are running locally, resources are loading fast.. very fast
Don't forget to use your developer tools and configure network throttling (to simulate a slower connection). That should simulate a "real" scenario and let you test your code better
Here is a screenshot from chrome... enjoy!
answered Nov 19 at 19:04
ymz
2,6431817
answered Nov 19 at 19:04
ymz
2,6431817
answered Nov 19 at 19:04
ymz
2,6431817
answered Nov 19 at 19:04
ymz
2,6431817
2,6431817
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380925%2fload-gif-until-page-is-fully-load%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
3
well seems about right since only thing to load is the image so as soon as it loads, window.onload fires.
– epascarello
Nov 19 at 18:53
1
You can delay
showHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms– darklightcode
Nov 19 at 18:55
@epascarello, thank you but what i can do, that the gif is loading during the page is loading and disappear once the page is loaded ?
– alex85
Nov 19 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 at 19:04