CODEWITHSUNDEEP
jquery
Awais Imran
Awais Imran

Reputation: 1344

How to load specific div before anything else on the website?

I have two div panels (left_panel and right_panel) on the website. Left panel has hundreds of food items and right panel has small box of order where we can see how many items user has added from the left panel. Now problem is when the page loads Left panel takes long time to fetch data from database and when it loaded completely than right panel appears. Is there any jquery with the help of that I can load the right panel first before the left panel or anything else on the website?

Upvotes: 1

Views: 2248

Answers (6)

Kishor Kundan
Kishor Kundan

Reputation: 3165

There are few things there

Left panel has hundreds of food items and right panel has small box of order where we can see how many items user has added from the left panel.

You can defer loading some of the data here by using Pagination, suggest/recommend or search. I don't users will have very pleasant experience scouting reqd item from hundreds of records

the page loads Left panel takes long time to fetch data from database

Fetching records from database is already done when the html starts rendering unless you defer doing that later from XHR/Ajax request. Even if it is done via AJAX, it will be done concurrently and might not affect loading of other DOM elements severely.

I would:

  1. load the right panel first.
  2. load the left panel via AJAX and implement Pagination or live search feature.

Upvotes: 1

user2156884
user2156884

Reputation: 

 $(document).ready(function() {
  $("div").show(); 
});

And in Css hidden the div right

Or bether load left with ajax and when finished show the div right ?

$.ajax({
  url: "test.php",
//stuff
}).done(function() {
 $("#rdiv").show(); 
});

Upvotes: 0

ckersch
ckersch

Reputation: 7687

If you use the .load(callback) method on the div you're trying to load, and then put the function for rendering the rest of the page in the callback, it will do what you want. Note that this is a different jQuery load method from the one that loads data based on a url.

Reference: http://api.jquery.com/load-event/

Upvotes: 0

mplungjan
mplungjan

Reputation: 178350

$(function)() {
  $("#left").load("leftcontent.html");
});

<div id="right" style="float:right">....</div>
<div id="left"></div>

Upvotes: 0

Blake Schwendiman
Blake Schwendiman

Reputation: 452

I would recommend using AJAX to load the left content after the main page loads. The basic concept would be to have an empty left panel, populated right panel as the core HTML of the page. Then, when the page is loaded in the browser, use AJAX (jQuery.load) to bring in the content of the left-hand column.

Upvotes: 0

isherwood
isherwood

Reputation: 61114

Initially hide the right column, and put a callback in your ajax function (or whatever you're loading content with) that makes the right column visible.

Upvotes: 0

Related Questions