How to render header or some data then whole page - javascript

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.

Related

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

Is it possible to make changes to a page source content variable through Ajax

Is it possible to make changes to the page source content through Ajax loaded by a jsp include in the main jsp ?
If not is it possible to reload that portion of the page alone (the jsp that loads some of the content) and to have a portion of the content in the page source changed ?
Details:
I've a variable called page this var gets its content from a java controller as a map of <String key,map<String key,String value>then it performs multiple actions and adds different params to the map, convert it to JSON and sends it to a jsp.
Recently I wanted to do something different,I want to add a param to the 'page' variable called contentOfThePage this variable gets its content dynamically when the document is fully loaded, after that I perform an Ajax request to the controller to add the new param, but the problem is that the new changes never makes it to the page source unless i reload the page or i navigate to another page and this is causing a lot of trouble as the page source may contain the page content of the previous page!
Any idea on how to avoid this and make changes to the page source (NOT DOM) directly ?
keep in mind that the contents are added dynamically but i need a way to change the page source without impacting the performance by requesting a reload after the ajax request succeeded
First You want to update some data that is already there after page load
you already have a json so a rest call i assume
you call it using ajax
now you added something else that you want to change
Yes it can be done actually
but not with the present set
i assume you have a single jsp and trying to change that jsp
well fit whatever you want to change in a panel like a graph or anything else
Add a button to top of the panel and on click the button url must be to the rest call so then data will be updated
I too have faced a similar problem with graphs,
i needed the graph to give updated data without refreshing the whole page,
so i put it inside a panel and wrote a rest controller that gives data for the graph and put a refresh button that calls this rest controller. This let me then update the graph without refreshing the rest of page

What is the best practice to use JSP and Ajax to load data?

I am a front-end developer who knows little JSP. I am working on a project that is building a CMS. This particular part I need advice is for slideshow data. In the JSP I am loading each slide and then injecting data with ajax. However it seems to be loading slowly, especially slideshows with more than 100 slides. It is also breaking with a lot of slides/HTML structure seems to break.
Each slide's data is loading with it's own endpoint by taking it's ID. In addition, each slide has a edit button that calls the slide's endpoint again to load a form, which also seems to load a bit slow. I was seeking what the best way to go about including this data with ajax. I was thinking something like infinite scroll - specifically http://www.responsivewebmobile.com/app/webroot/rwm_infinite_scroll/. However, what is the best way of organizing this and loading the data? Any advice is greatly appreciated.
Use Single page scrolling.We can load only one page at that time by loading data from Ajax dynamically.
Refer this
http://pagescroller.com/
http://alvarotrigo.com/fullPage/
While clicking page up or page down or slider ,we can load the content of next page using Ajax with id

Loading a HTML page without waiting for certain parts to load

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.

Pagination with special loading function?

I was searching for a script or at least a code snippet but haven't really made any progress. Anyway, I'm looking for a script that works like a simple pagination javascript but it should be accessible by linking from anywhere in the document and by calling it with the URL (e.g. on www.abc.de/default.html#thirddiv the third page of the pagination is displayed). Further, the contents should be loaded upon request (when the user clicks on the link and enters the specific page of the pagination), so that cookies, that have been set or deleted in the same document earlier can be used later without reloading the entire page. Something like that is used on Facebook for calling contents and loading them.
I've found a script on CSS Tricks called BetterBlogroll but I don't really get my mind into this. A pagination script from DynamicDrive is already working very well on the page but my problem is that there should be running three of them on the same page and as I said, the content should be loaded upon the user's request.
The script I'd need does not has to be with loads of CSS, the best way would be plain javascript and only the required CSS and HTML data. Anything else just disturbs. If anyone can help me out here, I'd be very thankful.
Check out Ryan Bates's Railscasts #174 and #175. These two are not rails specific, and explain this well.

Categories

Resources