I wish to have a loading sing in the webpage until all elements are loaded. I tried having popup alert using JavaScript
<script type="text/javascript">
window.onload = function()
{
alert('loading');
}
</script>
but did not look good, can I add images to alert window.
Or How can i have a webpage on the top that is displayed for few seconds.
You should make a div, which should be on top of everything else on the page, with the loading text/images you´d like in it. Then you can hide it with JavaScript when the page loads completely.
Related
I'm making a website, and I have a problem. Or more exactly, I don't know how to solve the blank page problem.
I'm making a website, where if you swipe right, some data will be inseret in the database, and then the webpage will refresh. After refresh, a blank page is shown, and then the normal webpage with all it's html.
How can I put a loader image on the blank page before the DOM is ready? I'm using jquery and jquery mobile.
The webpage is this: http://meetmean.comxa.com/KlausApp/home.php . If you swipe to right, or left, it will show you an alert box, and then the page will refresh. I want the blank page that is shown after to be a loading image.
I had kind of the same problem and my solution is:
I covered the (blank one you were talking about) HTML page with a full screen black background and a css animation in the div , and I hide that div when the page is fully loaded using JavaScript
window.onload = function () { $('body').toggleClass('loaded'); };
This function will run when the all the content in your html body is fully loaded.
This code will add a class named loaded to your html body,
in my style.css file the loaded class will hide the full screen div. it was one of the ways to have a loader in your page and it's up to you , there are many ways to do this.
Take an SVG animation file and keep it wherever you want to show it in the page.. Previously keep its display property none ..if you are using (jQuery) AJAX (i.e. $.ajax()) to fetch the data you can use the on complete callback function in the AJAX options to fadeout the SVG when the animation comes.
function ajaxCall(){
$("#svg").fadeIn("slow");
$.ajax({url: "demo_test.txt", complete: function(result){
$("#svg").fadeOut("slow");
}});
}
Here as soon as the function is called the SVG animation appears.. and soon as AJAX gets response the SVG is faded out.
You can get loading animations from http://loading.io
You could use some of loaders from this page: https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html
I am using Jquery tabs in my project, and it all works fine.
However when the user opens the page, the page displays all the material in all the tabs for a second first, then it executes the javascript and the screen comes back to normal.
It's an ugly sight, how can I prevent this? Is there a way to show the page after all the loading is done only?
You could try hiding your content when the page loads and using JQuery to reveal it.
HTML:
<div id="contentDiv" style="display: none;">....</div>
JavaScript:
jQuery(document).ready(function ($) {$('#orderContentsInfoBox').css('display','block');});
This jQuery function fires when the document is fully loaded. If you are still seeing a flicker of content before it is hidden in tabs, then I would recommend finding the function that sets up the tabs and inserting the code to reveal the content div there. That way the content will only appear after all tabs are setup.
I'm trying to create a pop up.
I host my own website and I would like an image to be displayed as a pop up when the website is opened.
I've tried to write some code:
<head>
<script type="text/javascript">
function openWin(img){
var path = "images/"
window.open(path+img,"mywin","menubar=0,resizable=0,width=200,height=200")
}
</script>
</head>
<body>
open window
</body>
But here i dont want the <a href>. It shows that when I click on it the image opens but I don't want this.
I want the image to just be displayed without the need to click or hover anywhere, and I also want that when I click anywhere outside the image for it to close.
So how do I do this?
Just call the openWin() function in a script tag at the bottom of your html page. Don't associate it with a click or other event, just call the function. The script will run when the page loads, calling the function, which will open a new window on browsers that don't have that turned off.
Possibly, that will then annoy your users and they will go away.
I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You
This is possible with JavaScript (no extra libraries required).
Simply use a function to set the src/display the frame when a link or button is clicked.
function loadIFrame(frameID, url) {
var frame = document.getElementById(frameID);
frame.setAttribute('src', url);
frame.style.display = 'block';
}
See the example here:
http://jsfiddle.net/ZNGmy/
Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.
This link has an example of popping-up html pages.
http://allwebco-templates.com/support/S_add_pop.htm
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.