I am trying to load different pages with refresh using jquery with the help of window.history.pushState('','',url);
function goto(event,el)
{
url=el.href;
event.preventDefault();
window.history.pushState('','',url);
//$('html').load(url);
$.get(url, function(data) {
var head=data.match(/<head[^>]*>[\s\S]*<\/head>/gi);
$('head').html(head[0]);
//$('#content').html($(data).find('#content').html());
var body=data.match(/<body[^>]*>[\s\S]*<\/body>/gi)
$('body').html(body[0]);
});
}
HTML is loading before CSS and there will be around 1-2 second of naked html display then css is loading completely
All my pages are different so i have to load different css, script everytime.
Is there any way to load the css quicker than the html or is there ant better way to load whole page or replace the current page content with new page.
I really don't want to use any plugin
The simple solution is try using Spinner or loader on page load, which prevents you naked HTML form Users
here is link
How to show Page Loading div until the page has finished loading
Related
is it possible to load web page in background using javascript/jquery? I mean load DOM, run all scripts, load all dependencies (CSS, external JS libraries). I don't want to load HTML and replace it. It's easy to do but will cause all styles/scripts to be loaded after replacement, not before (as far as I know).
The reason is that page loading time is 10-20s and I don't want page to freeze during loading content. There is single JS script which takes 2-4s to initialize. The idea is to show some placeholder page like "page is loading, please wait" and load everything in background.
I know page should be rebuilt so it doesn't take so much time to load but it's not possible in page owner's budget.
EDIT: I thought about loading page in iframe and then move iframe's content to the main body. Would it work? Wouldn't I loose some JS/Jquery data, pointers to DOM elements etc.? Wouldn't it cause to reload all JS?
I have an html page with a pretty heavy iframe embedded there. I need to start loading that iframe after everything is already loaded in order not to block the whole page loading. I've tried setting its src attribute with JS after everything else is done. But when I do it this way the browser tab still says the loading is in process (there's a spinner instead of the favicon). How can I prevent that effect and load that iframe "silently"?
You could use the following (also using jQuery):
$('iframe').hide().attr('src', 'http://example.com').load(function() {
$(this).show();
}
I am using lazyload by VVO http://vvo.github.io/lazyload/ from quite a time but for this specific page I don't know what is going wrong. It loads all images when page loads, which are supposed to be lazy loaded. On other pages of website it is working fine.
I have even tried using custom initialization, changing offset and viewport container but no use. My document is also not automatically scrolling on page load.
Problem is happening on this website's home page Winni.in
Below banner there are 3 rows of products, out of which last 2 row's products images should be lazy loaded only on page scroll. But still it loads all images on page load
On page scroll you might be loading dynamic elements from AJAX.
VVO Lazyload - lzld(this) will not work form dynamic elements be default.
You have to manually call lzld(imagelement) again for dynamic elements.
Example:-
// Add following code inside AJAX success function
$('#dynamic_content img').each(function(index,element) {
lzld(element);
});
If the script tag is after addthis div. It slow down loading of the page, I don't care that it slow down, but I would like to now show that the page is sill loading (google chrome show load favicon). I removed the script tag and put it to $(funcion) in my external file where all my jQuery code is. But when script is loaded it still show loading favicon.
var src = 'http://s7.addthis.com/js/250/addthis_widget.js#username=boobaloo';
$.getScript(src);
I also try to use
$('<script/>').attr('src', src).appendTo('head');
Is it posible to load addthis buttons and don't show that page is still loading? Can someone explain why it show that the page is loading?
Try to include "addthis" script in a separate function and call the function wherever you want. Also call the method using setTimeout. Eg:- setTimeout('AddthisMethod', 1000);
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.