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);
});
Related
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
We have the following situation:
We have a webpage (let's call it Page A) that gives us only the header of a website.
We have another webpage (let's call it Page B) that gives us the content with no header and includes the Page A in a hidden iframe.
When Page A is loaded it will get its own HTML and add it in an empty div in Page B.
All of this is working as expected.
My question:
Can I delay the page rendering of Page B when it reaches the iframe, wait for the iframe to load and when the HTML is populated in Page A to continue the rendering. The behaviour should be as if I'm calling the contents from a synchronous AJAX call. The idea is NOT to show the content of the Page below the main menu until the menu HTML is populated.
The business logics behind this:
We're using an external service as a forum and we need to add our website header above. They can give as a free-html slot where we can put our own HTML. The header is dynamic so we need to load it each time from an URL. Since their site may response faster we don't want the content to load and several moments later the menu to pop out of nowhere. We need to have the menu HTML populated before we continue showing the content. The Menu HTML is populated from an iFrame by the iFrame so we need to wait for it to load.
Any help will be appreciated.
Maybe you can hide the contents of Page B via style="display:none;" and then show the contents when iframe's load event fires.
Insert the markup for the <iframe> dynamically in a content loaded event handler. Since you've tagged the question jquery
$(window).on("load", function() {
var iframe = $("iframe").attr("src",url).whatever();
$("whatever selector").append(iframe);
})
I have a iFrame which loads many different pages, the initial load is always fine as i hide the IFrame until content is loaded then only do i display the IFrame.
My problem is now i have some pages which need to postback to grab information out the database dependent on what a user has on that page.
When this happens i get a white page while content is loaded. I cant hide the page as this would look worse then having a white loading page, i just need it to sit still with no flash while its drop down box populates.
I'm up for any solution using JS JQ or C# and my project is in ASP.
How i call my page refresh:
window.location.reload(true);
I call the refresh from inside the iFrame (Name: IFrameDam)
I am able to hid my IFrame from with in its self if this sparks any idea's:
$('#IFrameDam', window.parent.document).hide();
You can use Ajax request instead iframe and update the contents inside iframe parent div with id #IFrameDam and set the timer to resend ajax request and update without white screen. This behavior is same for almost any browser whereas iframe loads a whole new page inside current page leaving a blank space when not loaded.
here's how you can achieve this using ajax and jquery.
Just put iframe src path after "request_page" and refresh time after "time" variables.
Follow this link: http://jsbin.com/EYIKAnAb/1/edit?js
I'm creating a mobile app using jquery mobile and cordova. I've successfully loaded a dynamic listview from a json ajax call. My issue is that when I navigate to another page, then press the back button, the original page's listview does not load and there is nothing where it should be. If I refresh the page, the listview appears. Rather than refresh the whole page every time I navigate to this page, how would I refresh just the listview?
I've tried refreshing the listview both when the DOM and the window have loaded, and before both, and using $(document).on("pagebeforeshow", "#pagenamehere", function() {}); to no avail.
To be more specific, I have two pages with listviews. The navigational steps go as follows:
1. load page 1: listview shows
2. navigate to page 2: its listview does not show
3. press back: page 1 listview shows
4. navigate to page 2: its listview still does not show
5. refresh page 2: its listview DOES show
6. press back: page 1's listview does NOT show
This process should make it clear that the listview only loads when the url is directly input or reloaded; for some reason navigation between pages (different html files) breaks this.
If you have script inside the head tag of the second page and this page is loaded through Ajax, then the script won't execute.
Try to move your script from the head tag inside the second page's div (<div data-role="page" id="mySecondPage">) or create a JS file and load it on the first page's load. Relevant example here
jQuery Mobile uses Ajax to perform pages transitions so during the transition jQuery Mobile will only inject the contents of the response's body element (or more specifically the data-role="page" element). Nothing in the head of the page will be used (except the page title).
In conclusion, any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax. They will execute if the page is requested via HTTP and that's why your listview is loaded after a full page refresh.
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.