One div and its content on website loading last - javascript

UPDATE : With help from #TrueBlueAussie,
Yes, since I am not hiding the div, the code below is useless. So ignoring it (The script I used below) , is there a proper solution to my problem.
I have a website, http://frankvinyl.com/
It is a wordpress website. The featured image at the top, it loads after all the website is loaded.
I tried for different solutions for loading the DIV first, but its not working.
$(document).ready(function() {
$("#main1").show();
});
The problem is, the content of #main1 loads after all the website and content is loaded. I just want to load the div with the flow as the rest of the content.
Have been tweaking around but cannot find a appropriate solution.

You are waiting for the document to be ready in your jquery.
Try putting $("#main1").show(); before the document ready.
Don't know if it will work, it has been a long time :p

Related

How to preload all my javascript files before loading my website body?

This question have been already treated on the internet but i dont find a simple answer.
I would like to load only thoses javascript files and css, before starting to run the body my website.
I'm using packery.js, but when my website appears at first, my divs are misplaced. When i reload the page, everything gets back in place.
Is there a way to say : does all css and js files have been donwload? Yes? Ok run the body.
Thank you
There isn't a lot of information you provided which would help us solve the issue directly, however couple of things...
Make sure all your scripts and styles links are places in the head tags. The HTML page gets rendered in browser Top-Down. I.E. It'll load any files from HEAD tags before the body is reached, same thing if you want your scripts to be loaded after the body is loaded.. just put them at the bottom, before the BODY closing tag.
Using JQuery would be the fastest solution if you wanted to perform some functionality after your page has loaded (I know there isn't a JQuery tag, however thought providing a JQuery answer could be advantageous.
$(document).ready(function()
{
//Document Loaded, Put code you want to execute here.
}

(document).ready functions have visible delay on page load

I have an element that has a class added to it on page load, via jQuery
jQuery(document).ready(function(){
$('.service_info_container').addClass('hide');
});
The class applies display: none; to the element, the issue I'm facing is that on page load, for a split second you see the element and then it disappears as the class is added it to, but I can't figure out why there is this delay. I have made sure my jQuery library and JS file are added before my stylesheets in the header, but it makes no difference. The staging site this occurs on has no form of script defers or similar optimizations.
It's my understanding that using jQuery(document).ready should fire right away once the script is loading in the DOM, or am I wrong and it needs to wait for other things like all images being loaded first? I acknowledge there are other approaches I could take but I really want to know why this one presents this issue. Thanks for any help in advance.

Load sections of a website at specific times

Hello stack overflow community,
I am struggling to get this website to load quickly. It is a one page portfolio site running off the 'Simply' Theme available at Themeforest:
http://themeforest.net/item/simply-one-page-multipurpose-html-template/7788220?WT.ac=search_item&WT.oss_phrase=simply&WT.oss_rank=5&WT.z_author=AliA
With a video header and all of the other content below the header, we are looking at a 5 second load time.
What I am looking for is a way to load just the video header and navigation at first load, and after the video finishes loading and starts playing, the remaining content will start to load.
I am not all too familiar with Ajax or writing Javascript, but if I could get pointed in the right direction it would be greatly appreciated!
From what I've read so far, possibly the .load javascript might do the trick, but I have not found much information on it or where to start.
.load() includes a callback (see here) - so, assuming your content is all on the same domain, you just need to do something like this:
$(document).ready(function() {
$('#div_where_you_want_to_load_the_video').load(
'/path_to_video',
'#video_container',
function() {
//load the rest
}
);
});
Make sure you have jQuery loaded first.

HTML tabs not preloading

I am having a problem with tabbed content. I downloaded a very nicely styled content tabber done in HTML/CSS/Javascript.
The problem is that while the page is loading it shows all the content at once. Only once it has finished loading will it put it in the tabs.
Does anyone know why it would do this? I am thinking something to do with the JS and unfortunately I don't know anything about JS.
I can post the JS code if need be.
Thanks!
The reason for this is that your HTML (document) is loaded first prior to the JS being applied. So you are going to initially see all of the HTML content.
One solution to resolve this is to hide the content via CSS initially and then show it once the JS has converted the content into tabbed content.
A basic example of this can be found here http://jsfiddle.net/86pzN/
$(function(){
setTimeout(function(){
$( "#tabs" ).tabs();
$('#tabs-2,#tabs-3').show();
}, 3000);
});
The some of the tabs can be hidden via css and then shown after the Tab functionality has been applied.
p.s. I have added the setTimeout code here to mimic a page loading the HTML slowly before running the JS code.

Minor problem while loading page with jquery

I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/
ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).
instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.

Categories