Loading a HTML page without waiting for certain parts to load - javascript

I have a simple HTML page which contains many parts, out of which one part
<div id="external_data">...</div>
renders data from an external source and loads. It takes a very long time to load, and thus all the other parts of the page also wait till this section is loaded.
Is there way using jQuery or something else, to set the content of <div id="external_data"> to a loading image and load the rest of the page without depending on that one section ? and How do I achieve this?

If the content of that div is rendered server-side and served with the rest of the page, there's two options you could go for:
1) Serve the page with the div containing the loading graphic you mentioned, and then use jQuery to load the contents of the div with a $.post or $.get when the page loads. This will allow the page to be served without whatever back-end logic you have holding up everything else.
2) If you don't like using $.post or $.get, you can put an iFrame in that div that references another page which has the div contents. This will load separately from the page, thus not holding things up. However, be advised that iFrames sometimes behave strangely between browsers in terms of sizing, borders, etc. Make sure your code is tested in all major browsers (mainly IE) to make sure it looks ok in all of them.

Related

What is the difference between loading rest of the page when the user reaches bottom with only javascript in comperison two javascript and ajax?

Maybe the question sounds a little bit confusing.
So i wanted to reduce page loading time,by loading a part of the page with html and css and then i add script at the bottom of the body with event listener and function which detects when has user scrolled to the bottom of the page.If user reaches the bottom of the page i load javascript nodes texts and images.
What is the difference between loading images as creating image nodes and adding it source or retriving images and text with ajax inside javascript.
None. Ajax is the name for what you're talking about.
With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.
https://en.wikipedia.org/wiki/Ajax_(programming)

Loading php features in javascript after loading page

I have a problem, I have a php code that loads 10 seconds. This is too long to load the page.
So I need load the whole page first without it. And on place of it show simple text "loading".
Next through javascript load and show it independently. However, these functions are 3.I need to do that with every function.
Specifically, detection of CPU / RAM / HDD state on remote servers.Because it now loads me the page for 10 seconds. This is how I would like to load whole web without this functions the first one, and after a few seconds load it, regardless of the page load.
I needed to keep these features in the same file too.
I hope you understand. Thank you for your help.
Try something like this: First, make your initial page with just HTML. Then have the page make a call with AJAX to a separate PHP file which will do the more complex steps that will take time.
Good to keep things faster from start
follow the steps
1) basic html having loading screen and divs in which other data will be placed
2) send parallel ajaxes to server to get different data in parts
3) on ajax response add data to those predefined divs
4) hide loading screen

How to render header or some data then whole page

I am working on eCommerce website which is taking too much of time load whole webpage because of lots of images and data
How can I render some data like header first and then other like images, etc?
You can use ajax to load part of the website one by one. In your html code just keep whatever is necessary to show at first and then on the document being ready, call your ajax scripts to bring the data at runtime. This way user may not notice a lot of lag.

link tag calling js function don't work

I have a static site with classic menu like: home, services, contact etc links.
What I'm trying to do is reducing the site's size.
So, instead of using multiple pages for links (like home.html, services.html) I'm trying to keep only one page and then (when clicking occurs) dynamically change content.
html code (sample):
contact
<h1>old text</h1>
js code:
function ContactClick() {
$('h1').html('new text to change, but it doesnt work, yay!');
}
Something funny happens. If I click on the link, 'old text' becomes indeed 'new text', BUT ONLY FOR 1 SECOND! And then, it changes right back to 'old text'!
I have tryied calling like this: <a href="javascript:ContactClick();"> and it works just fine, but still I need to refresh the page when click event occurs (I have some color changing stuff on site, lol).
Is there another way to reduce site's size, or my idea is just fine?
OR
Is there a solve including refreshing the site and calling the js junction from link?
Perhaps you shouldn't be reloading the page in your href.
You do not need to reduce the site's size. Static pages that contain only text are small and load in a fraction of a second even at the first time. After that, they will be in cache and load instantly.
On the other hand, if you put all the text in one page, plus add some javascript code, the result is not smaller but bigger than the static pages.
Further, you should remember that javascript does not always work. For example, many people disable javascript for security reasons or to avoid irritating advertisements. Therefore, navigation should never be dependent on javascript. At the very least, you should have noscript part that works with static pages in case javascript is disabled. (But this will make the page even bigger.)

ASP.NET content display

I am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.

Categories

Resources