I am trying to attempt a page loading only for the first loading screen. This means when I load the page, I could have a preloading screen, but not on every page load or reload (not on the inside pages).
How could I use
window.onload
function to achieve this?
Could anyone suggest?
Thanks and regards
You can use
<script>
if (!localStorage['done']) {
localStorage['done'] = 'yes';
myFunction();
}
</script>
If you set your loading design to cover the page and then simply using Jquery you can hide it. If your loading the new pages 'inline' without refreshing the window then you will only see your loading page when you open the site originally
document.onreadystatechange=function() {
if(document.readyState=="complete") {
$(".loading").hide();
}};
Related
I have jquery to load user messages every 1 second but I would like to implement a solution to the messages load to act, similar as a: <iframe>, <object> or <embed> tags
<script>
setInterval(
function()
{
$('#chat').load('load_chat.php');
}, 1000);
</script>
The problem is as it loads every 1 second I can't just use a iframe of the page, I need to keep using jquery, somebody has a solution?
I tried with:
<script>
setInterval(
function()
{
//$('#chat').load('load_chat.php');
$("#frame").attr("src", "load_chat.php");
}, 1000);
</script>
But this is not what I need, it flash the iframe all the time.
I need to make jquery load method looks like a iframe.
but the problem with using iframe is because I need jquery to refresh the frame every 1 second. some body has an idea of how to make <div id="chat"></div> have a scroll bar as iframe ?
First off all I think this is not the correct way to do this.
Read up on streams, because this type of use case is exactly what they where made for.
Then, if you have your load-chat.php loaded in an iframe, you can use the window send message method to trigger a reloadin the page by jquery.
The downside is, that your iframe should also contain a jquery instance.
Check this -> https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I solved with the following:
$('#chat').css("overflow-y", "scroll");
If someone has a better alternative it would be appreciated.
I trying to do the following:
I want to redirect to another page using javascript, but I want the page (that we redirect to) to fade in instead of being redirect to aggressively. How can Iget that done using jquery?
I tried the following:
$('.splash').hide();
$('.splash').fadeIn(2000,
function() {
setTimeout(
function() {
document.location.href = 'test.html';
},100)
<div class = "splash"></div>
Well you could $('html').fadeOut(); the current page you are on, then do your redirect. But that second page would have to have it's own $('html').fadeIn();
There is no way to push a jQuery execution onto a totally separate page unfortunately :/
You could try loading the page with $.load() AJAX style also.
I'm making a site where the different pages are brought in by .load(), the problem is that index.php is initially empty and my other efforts have simply loaded the page into itself or left the page empty (pages can still be emptied and loaded from #contentspace though). My current code loads nothing, i'm sure i'm doing several things wrong, I just need to know where to start. do i need to use php for this?
//load page into contentspace by default?
var defaultpage = "blog.php";
$(document).ready(function() {
$("#contentspace").load(defaultpage);
)};
You have a syntax error with your closing of the $(document).ready )}; for one. As you can see in my demo here: http://jsfiddle.net/n1ck/NNpqq/9/ it is requesting the blog.php file.
//load page into contentspace by default?
var defaultpage = "blog.php";
$(document).ready(function() {
$("#contentspace").load(defaultpage);
});
I am developing a website (jQuery + Ajax) and I stumbled on a problem. When a page loads dynamically (for the first time, images aren't cached yet), it doesn't display the images. When I recall the ajax load function, suddenly my pictures are there.
$("#overlayInner").load(source+" #loader",function() {
$('#workImgs').nivoSlider();
});
I call nivoSlider on my dynamic page outside my loader div, so people who arrive directly on this page, can see the images as well.
<script type="text/javascript">
$(function(){
$('#workImgs').nivoSlider();
});
</script>
When you try to load the page without Ajax, the images load like they should.
Any ideas?
It is hard to make experiments in your website :) but you can try to add to each loading page (4d.html, dokerpoot.html and vuylsteke.html) the code for image preloading (in the start of the body tag). I used example images from vuylsteke.html:
<script type="text/javascript">
var images = [
'images/work/kapsalon2.jpg',
'images/work/kapsalon3.jpg',
'images/work/kapsalon4.jpg'
];
$(images).each(function() {
$('<img/>')[0].src = this;
});
</script>
Since the fragment load function after get parses the returned document to find the element with an ID of container, the idea is to let it first to load these images into memory, and then start to parse the document, and finally initialize Nivoslider. Possibly it will help.
I had this issue with content being loaded from a database. It turns out it was being caused by the Images not having a width or height set. This means that the plugin didn't know the size of the images and didn't show them but the browser calc'd these properties after the re-load so it showed the second time around.
Setting a width and height resolved this.
I have a classic ASP page which is loading an ASP.net page through an iframe inside the ASP page. This is working great except for the fact that it takes a while to load the ASP.net page. The user is left here with unfavorable experience because all they say is an empty blank page until the page is finish loading.
What I would like to do is load an initial "loading" ASP.net page so at least the user is shown something and then when the ASP.net page is ready load the correct ASP.net page into the iframe.
Is this possible? I'm thinking perhaps with a bit of javascript but not 100% sure.
There is no "ASP page" once it hits the browser, there is only the resulting HTML.
You have a few problems here:
1) If you put something in the Iframe, it will be over-written as soon as the new page loads. So, you cannot use what's in the Iframe to display your message.
2) How to tell when the Iframe had loaded
You need to determine the location and size of the Iframe on your page. You need to position an element over it with your message. Modify the style of an absolutely-positioned element to cover the Iframe using JavaScript. Most people would use a framework, such as jQuery, to make it a lot easier.
You then need to detect when the Iframe has loaded and hide this element.
You can use this code to determine that the Iframe has loaded:
function checkIframeLoading() {
// Get a handle to the iframe element
var iframe = document.getElementById('testIframe');
// Check if loading is complete
if ( iframe.document.readyState == 'complete' ) {
// The loading is complete, call the function we want executed once the iframe is loaded
functionToCallAfterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout('checkIframeLoading();', 100);
}
You can use JQuery to modify an iframe after the page is loaded.
Another question on stackoverflow already contains a good example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var locations = ["http://webPage1.com", "http://webPage2.com"];
var len = array.length;
var iframe = $('#frame');
var i = 0;
setInterval(function () {
$iframe.attr('src', locations[++i % len]);
}, 30000);
});
</script>