When page is loading images are shown disproportionate - javascript

I have a page with a few images, I've used css to set the size of those images and it's working good, but when the page is loading for some miliseconds the images are shown disproportionate, it looks ugly. I believe they are showing before the css is applied on their current sizes.. Is it possible to correct this?
When loading page(it last miliseconds but doesn't looks good):
And once the page loads and css is applied:

HTML page render from top to bottom. Adding style on header will apply all available style to body elements.
Adding style at bottom of body will render HTML tags first and then load stylesheet and then render ui again to apply style

Make sure your stylesheet gets loaded as early as possible by placing it in the header of the HTML.

I believe adding stylesheets to <head> will fix your issue. They load too late.

3 options:
Add style in the header
add a page loader
page loader + hide content until is loaded jquery, hide content until loaded

Related

Apply CSS font before JS execution

I'm building the web application which uses canvas surface on top of HTML body. I use canvas to draw border around SPANs. It works nearly perfectly but I still have a problem on the page load.
I've used chrome debugger and noticed that font style from css file is applied after script execution which confuses DOM getElementRects method and causes that the spans border is mispositioned after page is fully rendered. Below I'm attaching screenshots.
Do you have any idea how to solve that? Can I wait on until css style is fully applied?
Font loading takes some more time than css loading take help of following -> How to be notified once a web font has loaded
Is $(document).ready() also CSS ready?
The ready() method no longer tries to make any guarantees about waiting for all stylesheets to be loaded. Instead all CSS files should be included before the scripts on the page. More Information
Make sure your scripts are on the bottom of the html page.

load all the resources before load page

Here is my question
I a have one webpage with lot of images including small and big resolutions
both in HTML and CSS I used those images (eg: as background image in CSS classes )
Now I need to load all my images before loading my site I tried to search in google I got many suggestions but in those they are using id class and ect... but I need to load all my images regardless of any class or id.
I need some thing like this
http://www.entheosweb.com/tutorials/css/preloader/Demo.html
help will be really appreciated
thank you...
All you need is onload event on the body tag. It indicates that the page has loaded completely. You need to show some animation covering the whole page until the page is loaded just as mentioned in the link you provided.
Displaying the loader
$(document).ready(function(){
// Display the loader logic
}
Hiding the loader
function hideLoader(){
// Hide the loader
}
<body onload="hideLoader()">

dynamically add sylesheet to head using javascript

I need to have the old "resize fonts" option at the top of the site I'm building - one link that is the default size, one that makes fonts a size bigger, and one that makes them two sizes bigger. it only needs to affect some nav and body copy, so I'd like to simply make 2 extra stylesheets to just style those elements, and upon clicking one of the links, load an additional stylesheet into the header. when you click the "default" link, it will go back to the original size (with no additional stylesheets loaded).
Is there a way to do this in javascript? This is a Wordpress site.
Alternately, I could use js to add a tag to the body and target the elements that way.
What is the best way to do this?
You should just change the class of the elements. That will change their css to whatever is specified by that class in the stylesheet. Your first option is more complicated than it needs to be. If you use JQuery you can literally make this one line of code.
$("span#applicableId").each(function(){
$(this).class("theOtherClass");
});
You can dynamically add a stylesheet on the fly by using something like below:
function loadNewStyleSheet() {
var style = document.createElement('style');
style.type = 'text/css';
style.src = 'http://path/to/cssfile'
document.body.appendChild(style);
}
I would do this as an include statement in in a php tag. Then just have one php file you include on the top of each page.
php inlude info:
http://php.net/manual/en/function.include.php
then from there I bet there is some code out there you could reuse.
For example maybe this could be of some help? it is a php script that will ajust the css styling of the page and not interfer with other parts.
http://www.phpclasses.org/package/1296-PHP-Resizes-text-on-a-page-using-styles-and-sessions-.html
I guess that it is not possible to add it dynamically to head tag. Of course, you can do that, but this stylesheet won't be loaded. Maybe you should try to get it via ajax and append to a special script tag in your site. If user will choose another option, then you will load another content, clear this script tag and append new content there.

JQuery load page into div with styles

I am trying to use .load so I can load an external page into a div on the current user's page. When I call .load , does it load the content and then style it with the current stylesheet defined in that page? If not how would I go about doing that? Example;
<head>
<link ref="stylesheet" href="main.css"/>
</head>
<body>
<div class="section">
<h2>Say this div was loaded with .load after page loaded</h2>
</div>
</body>
If .section was loaded via .load, would the style be loaded of the current page and modify that div after it loaded or is it just the html that got loaded with no styling. If it is the latter, how would I style it without using <style> tags?
Anytime you alter the DOM in a way that causes a redraw (such as adding visible elements to the DOM), each element is checked against all the rules in the CSS style-sheets.
So to answer your question directly. Yes, the styles will be added to elements that are added to the DOM at anytime.
If the css is available on the page which contains section div then the styles will be applied after load renders the content. Also if the styles are part of the load response then also it will be rendered with styles applied.
If the styles are not available on the page and also you are not getting it in the load response then you have to explicitly get it using ajax or adding a link tag with appropriate stylesheet url into the page.
Your style of the current page will apply to the content loaded via .load
You can specify CSS in your main .css file, so when DOM is added, styles are taken from the main CSS file.

Load the all css & js for the page before downloading the "big list of images"

I have a website that displays a list of around 20 auto-played slideshows(each containing 4-5 images) in a page. Now the problem is that this is taking up a long time to load the website(& ofcourse it would, since so many images) but I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
So... Is there a way to set a preferential order of loading of the requested resources ?
Is there a way to set a preferential order of loading of the requested resources
Yes - put them in that order in your HTML file!
I am wanting to preferentially load all the neccessary css and js files at first, so that the other components on the page are properly rendered before the images begin to download.
That's a different problem.
Your page components cannot be properly rendered until the dimensions of most elements are known. So, if you have other images in your page layout, those need to get loaded first, or have their width and height attributes specified in the markup.
Since your slideshow images would be mixed in with the rest of your layout if you used pure HTML to load them it sounds like you have little choice but to instead load all of your slide show images from Javascript, per other comments and answers.
Better way then using the dom to create elements have your divs or even img tags src be blank then load them with the images you want in an onload function using innerHTML:
function images(){
var place_to_put_image = document.getElementById("image_div");
place_to_put_image.innerHTML = "<img src=\"your_image_here\"></img>";
}
<body onload="images()>
<div id="image_div></div>
</body>
you could put your images in an array and assign the innerHTML of the div or whatever to the array as well if you want them all in the same place or you could put the onload in div or where ever you want the images to load.
There a few ways you can go about doing it but they all involve not actually putting the images in the HTML - at least not correctly. One way that I like to do it is to add the image src URLs to another property like the alt (not great for accessibility) or rel. Also, give all the images a class that will be used to hook into it with JS.
<img alt="images/foo.jpg" class="loadlater" />
Then in your JS, get all elements with class="loadlater" and set the source to the alt value.
img.src = img.alt;
You didnt mention jQuery. If you were using jQuery, the command to swap the attributes would look like this:
$('.loadlater').each(function() { this.src=this.alt; });
Then, wherever and whenever you call this, the images will be loaded. You will want to call it after your css and js finishes loading - probably the document.load function. Again, if you were using jQuery, it would look like this:
$(function()
{
$('.loadlater').each(function() { this.src=this.alt; });
});

Categories