CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
Sidharth Ghoshal
Sidharth Ghoshal

Reputation: 720

Speeding up Page Loads for Image Background

Working Environment: I have a website that must have an image background (pretend its a math problem and there is no choice but to accept this).

Is there a way for me to format my html and CSS so that background loads faster?

One Idea I had was instead of having the "body" carry the image background, to instead partition the site into rows (using the tag) in the hopes the browser will load the divs, hence it can present some of the visible portions of the site before having loaded EVERYTHING.

I'm pretty sure my method of manual div separation (And setting backgrounds of each slice) isn't the the most efficient approach to this. What is the best way to carry out this technique?

Upvotes: 1

Views: 95

Answers (3)

Prathamesh Rasam
Prathamesh Rasam

Reputation: 436

1)first you need a transparent image 1x1 pixel just set this data uri as src default attribute , dont keep src attribute empty otherwise broswer call current page url which will increase extra http request

data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

2)then after onload event add your image url in src attribute.

Upvotes: 1

Michał Kutra
Michał Kutra

Reputation: 1202

IMHO simplest way to do website with image background is lazy loading of this image. Do it like here

HTML:

<body>
    ...
</body>

and CSS:

.dom-loaded {
    background-image: url('url-to-image');
}

and fininshing with JS (add dom-loaded to body element after your DOM will be fully loaded):

<script type="text/javascript">
    function lazyLoad() {
        $('body').addClass('dom-loaded');
    }

    if (window.addEventListener)
        window.addEventListener("load", lazyLoad, false);
    else if (window.attachEvent)
        window.attachEvent("onload", lazyLoad);
    else window.onload = lazyLoad;
</script>

Here You have working jsFiddle (with setTimeout just to show delay): http://jsfiddle.net/37vb4npa/1/

Also You need to remember about image optimization (for example ImageOptim - https://imageoptim.com/pl.html, or something online like SmushIt - http://www.smushit.com/ysmush.it/). And remember about other speed optimization stuff.

Your idea is a little similar to what Patrick's Hamman "Breaking News at 1000ms" slideshow is about - https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-trends-2014 - You'll find there some nice & advanced technics to speed website.

Also You can do lazy loading with plugin: http://www.appelsiini.net/projects/lazyload/enabled_background.html

Upvotes: 2

bluefog
bluefog

Reputation: 1894

There are many optimizations that you can do to images so that they load faster.

  1. In case of a png image, use services http://pngquant.org/ to achieve lossy compression of images without much loss of image detail. Or lossless compression using tools like http://optipng.sourceforge.net/
  2. If the image is primarily geometrical, consider using maps and areas.
  3. Use server side gzip compression.
  4. Prevent display of loading images by using lazy loading techniques.
  5. Use Google Page Speed to optimize the site further so as to use the available bandwidth efficiently.

Upvotes: 2

Related Questions