load gif until page is fully load
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 '18 at 18:50
alex85alex85
53
|
show 7 more comments
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 '18 at 18:50
alex85alex85
53
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 '18 at 18:53
1
You can delayshowHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms
– darklightcode
Nov 19 '18 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 '18 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 '18 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 '18 at 19:04
|
show 7 more comments
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 '18 at 18:50
alex85alex85
53
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 '18 at 18:50
alex85alex85
53
asked Nov 19 '18 at 18:50
alex85alex85
53
edited Nov 19 '18 at 21:03
alex85
asked Nov 19 '18 at 18:50
alex85alex85
53
asked Nov 19 '18 at 18:50
alex85alex85
53
asked Nov 19 '18 at 18:50
alex85alex85
53
53
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 '18 at 18:53
1
You can delayshowHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms
– darklightcode
Nov 19 '18 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 '18 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 '18 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 '18 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 '18 at 18:53
1
You can delayshowHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms
– darklightcode
Nov 19 '18 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 '18 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 '18 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 '18 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 '18 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 '18 at 18:53
1
1
You can delay
showHide('loadingd') by putting it in a setTimeout, i dunno, for about 250ms– darklightcode
Nov 19 '18 at 18:55
You can delay
showHide('loadingd') by putting it in a setTimeout, i dunno, for about 250ms– darklightcode
Nov 19 '18 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 '18 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 '18 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 '18 at 19:02
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 '18 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 '18 at 19:04
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 '18 at 19:04
|
show 7 more comments
2 Answers
2
active
oldest
votes
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 '18 at 19:50
epascarelloepascarello
153k14133183
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 '18 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 '18 at 20:28
add a comment |
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 '18 at 19:04
ymzymz
3,0631921
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 19:50
epascarelloepascarello
153k14133183
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 '18 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 '18 at 20:28
add a comment |
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 '18 at 19:50
epascarelloepascarello
153k14133183
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 '18 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 '18 at 20:28
add a comment |
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 '18 at 19:50
epascarelloepascarello
153k14133183
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 '18 at 19:50
epascarelloepascarello
153k14133183
edited Nov 19 '18 at 20:12
answered Nov 19 '18 at 19:50
epascarelloepascarello
153k14133183
answered Nov 19 '18 at 19:50
epascarelloepascarello
153k14133183
answered Nov 19 '18 at 19:50
epascarelloepascarello
153k14133183
153k14133183
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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 20:28
add a comment |
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 '18 at 19:04
ymzymz
3,0631921
add a comment |
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 '18 at 19:04
ymzymz
3,0631921
add a comment |
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 '18 at 19:04
ymzymz
3,0631921
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 '18 at 19:04
ymzymz
3,0631921
answered Nov 19 '18 at 19:04
ymzymz
3,0631921
answered Nov 19 '18 at 19:04
ymzymz
3,0631921
answered Nov 19 '18 at 19:04
ymzymz
3,0631921
3,0631921
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.
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 '18 at 18:53
1
You can delay
showHide('loadingd')by putting it in a setTimeout, i dunno, for about 250ms– darklightcode
Nov 19 '18 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 '18 at 19:01
@darklightcode, thank you.. can you show me this setTimeout, how it looks like ? thank you
– alex85
Nov 19 '18 at 19:02
function () { reSizeTextarea(); setTimeout(function(){showHide('loadingd');},250) }
– darklightcode
Nov 19 '18 at 19:04