0

I am trying to avoid downloading the images when the site loads, and rather let them download later when required. Will the images be downloaded if I set the stylesheet to 'disabled'? Such as:

<link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled>

I was thinking, I can later set the link to 'enabled' and then the images will be downloaded, am I correct by thinking this works the way I want?

Max S.
  • 1,383
  • 14
  • 25
  • 2
    The browser will still download your images.css stylesheet. The disabled attribute is for form elements only. – j08691 May 30 '14 at 19:10
  • See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link -- The use of disabled as an HTML attribute is non-standard and only used by some browsers. Do not use it. To achieve a similar effect, use one of the following techniques: – Sahil Grover May 30 '14 at 19:11
  • You should add css via javascript. – keiv.fly May 30 '14 at 19:12
  • 1
    When you say images, do you mean background images used in the stylesheet? – Oriol May 30 '14 at 19:12
  • @Oriol, yes images in stylesheet. – Max S. May 31 '14 at 12:32
  • @keiv.fly, there's too many CSS styles to add, we're talking about thousands of lines of CSS. – Max S. May 31 '14 at 12:33
  • I used this way to add flash banners of 0.5MB. You do not add css code, you only add the link to css via javascript. – keiv.fly May 31 '14 at 12:42
  • Question: what are you trying to optimize here? Reduce number of HTTP requests, reduce the page load size, or make it seem more responsive? – pp19dd May 31 '14 at 12:51
  • @pp19dd I myself used the same technique for flash banners. So I could reduce the time of page load and then load advertisement when all the other page is loaded. Actually Google Adsense loads its advertisements the same way. Probably for the same reason. – keiv.fly May 31 '14 at 12:57
  • @pp19dd I've built this pretty complicated site, it has an intro where I don't want load the rest of the images, so I tried the tip from 'keiv.fly' below and it works fine. I've split the CSS file into two, made a copy of it and removed everything and kept only classnames with 'background-image', and then I loaded the new images CSS file after the intro finished, rather than at the beginning because there are so many images. – Max S. Jun 12 '14 at 20:39

1 Answers1

0

This will work in any javascript function. I took it from the other question: adding css file with jquery 

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

I used a similar approach to load several flash banners on a website that were more than 0.5MB. So there are no problems with large data.

Community
  • 1
  • 1
keiv.fly
  • 3,343
  • 4
  • 26
  • 45