Four div areas not loading at the same time - javascript

I am building a website on wordpress, where it has four div areas (please check the first image), and contents are:
AREA-1: it's loading plain text content directly from html codes.
AREA-2: it loads 4 posts with thumbnail images from category-1, and showing as a slider.
AREA-3: it also loads 4 posts with thumbnail images, but from category-2, and showing as a slider.
AREA-4: it loads a contact form with 4 fileds using Contact Form-7 plugin.
Now the problem is, while the page is loading, AREA-1 and AREA-4 loads fast and visible without AREA-3 and AREA-4, which looks much odd. This is how it looks like while the page is loading (following image):
How can I fix this problem please? I want to load them all-together.
There is a large image slider (on top) with four images on the page as well. So using onload event for area-1 and area-4 will cause area-2 and area-3 load faster. And if I use onload for all the areas, then page will remain empty, while all the slider images will load. They are much large image, and it will not look good.
So is there any way to load all the 4 areas to load at the same time, doesn't matter if the image slider (on top) is fully loaded or not? I am not much good with javascript. So any help will be really appreciating.

2 Options:
preload the images http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
hide the text areas until the onload event. http://www.w3schools.com/jsref/event_img_onload.asp

Related

How to force preload of my website (or add a loading screen that would do the same)

I have to scroll down my webiste to make my background images appear and also it takes a while, how could i fix that by javascript by adding some kind of loading screen before displaying whole website
here's my website: https://donajsky.5v.pl/
You can create something that loads the page on the background and show the user a loading screen, but that might not be a good idea in terms of user experience and SEO.
I´d suggest to improve loading speeds by reducing the size of your images (space6.jpg for example is over 3 MB) so that your site loads quicker.
You can also take a look at lazy loading. The page then only loads the visible images. When the user scrolls down, more images are downloaded in the background. See https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading for example.

React show page when images are loaded

The past two nights I have been struggling with an issue in React. I have a website that has multiple images (a header, some gallery images, some cool photos). I want the page to render in whole the moment all images are correctly loaded.
There are people that tell me to use the lifecycle hooks, but that doesn't seem to work because the render proces is faster than the time some images need to load in.
This one time I thought I managed to get it working by doing the following: Add inline styling to container div saying display none. Then add onLoad={method to trigger a display: inherit} to the container div.
But when I used a bigger image (of 15MB, just to test it out) the loading was perhaps a succes but still took time to show on the page. So it didn't work afterall. It just 'looked' like it worked cause the other image loaded faster.
Anyone has any other idea's to tackle this problem?
Best of wishes,
If you know the number of images you have on the page you can do a counter that starts from zero and put an onLoad on each image which adds one to the counter when the image is loaded...then do a condition:
{counter===numberOfImages? <Content><Content/> : null}

Javascript image gallery - too many images and page loads very slow

I have an image gallery. It is powered by highslide and page contains the resized images previews (for example 100x100px, when you click on preview, fullsized picture is displayed, but that is not important...).
Images are uploaded to the gallery by users, and problem is, that on some point, about approximately 100 images on one page (=100 images which need to be resized by webbrowser for preview), page is loading VERY slow and freezes all the time.
Q1: Is there any javascript which will display for example FIRST 40 pictures (first 40 lines of a file) and other pictures will not be loaded? When I click 'next' it will display pictures 40-80, then 80-120... I dont even know if something like this is possible.
Q2: Or a javascript, which will load only pictures which are currently on the view? I found that one, it works fine, but when I scroll down to the end of my gallery, all the images have gone through my viewpoint, so they are loaded all... and it freezes aggain.
Q3: Or a script that will automaticly devide my page to tabs(each tab with defined file length)?
Thanks for every solution!
/EDIT
To: Frits van Campen
I have tried Lazy Load - http://www.appelsiini.net/projects/lazyload , but deviding into tabs would be more usefull.
//EDIT
TO: Mörre
I know that it would be much better if images was already resized and stored on my server, but either the original-sized images arent stored on my server, I have only src address of them.
just reduce the image size by their pixel.

Why do pictures need to be shown first for jquery image magnifier to work?

I'm working on a website that hosts music, pictures, and videos. I currently have 4 pages, a title page, a music page, a video page and an image page. This works well, but I would like to be able to incorporate the ability to play music and look at pictures at the same time. To do this, I created one HTML document with each former page inside a div with a descriptive class name. Then, I wrote a javascript function that shows and hides each div when it is called, so the page acts like it's 4 pages but it isn't. So i embedded the music player in a footer div that stays open as music plays, meaning you can switch back and forth between each media type while keeping the music footer open and playing. This is where the problem lies. When this is done, the image magnifier jquery function I used on my image page no longer works correctly, UNLESS the image div is shown at the beginning when the page opens. It's only then that you can switch between media types and still magnify the pictures. If the title div is shown first (like it's supposed to be), and you go to try and magnify an image, it doesn't work.
At first I thought maybe some of the external javascript libraries were negatively interacting with each other, but then I happened upon what I explained above and now I'm just at a loss as to why the images need to be the first things displayed for the magnifier to work correctly.
The jquery code I'm using is called jQuery Image Magnify and it's made by Dynamic Drive.
Edit: The way that I'm hiding and show div's is with style="display:none" to hide and style="display:block" to show.
Interesting question. Probably because the element needs to be actually visible for the jQuery Image Magnify function to run. I'm willing to bet that plugin uses imageElement.onload for the image magnification handler or something like that, which I think doesn't work if the image element is hidden.
As far as a solution goes, try setting your image to visible at when the page first loads, maybe with left set to -9999 px or something silly like that so it's technically still "visible" but the user can't see it. Then, after the image has loaded and (hopefully) been magnified or whatever the plugin does, move it to be a child of the div its page is supposed to be on and get rid of the negative left value.

Can Javascript force hidden divs to wait to load their contents? (HTML/Javascript)

I have a fairly basic thumbnail-and-view page going. As each thumbnail is clicked, the central pane shows the full-size image. This bit works fine - I'm using Javascript to show and hide the divs which contain the large images, but as the page first loads, it starts loading all of the images at the same time. This causes the first image the user sees to be brought in very slowly.
I have experimented with creating the divs on the fly, but then I'm stuck with the undesirable effect of having to wait for load of every image. Ideally, I'd like to use my current setup - just show and hide divs - and have the hidden divs start loading their contents as soon as the first pane has completed. Is there a way to set the loading priority on visible divs, such that hidden ones don't get network time until all visible divs are rendered?
I think what you want there is to combine your 'creating the divs on the fly' (for the non-visible divs) with image preloading. Should get you what you're looking for.

Categories

Resources