2

all visitors who visit my page would load a style.css which contains this colorbox line:

#cboxLoadingGraphic{background:url(/images/animation.gif) no-repeat center center}

this animation image should show only when clicking a certain button on the page, as a loading animation displayed while loading the colorbox modal window.

yet, I've noticed that there are various visitors who automatically preload animation.gif, even though they didn't click that button (and didn't open the modal window).

But since this is happening with about 1/3 of visitors, with different browesers, I can't understand what's the governing rule, what makes one user preload it, and another user load it only when and if he clicks on the said button?

rockyraw
  • 1,125
  • 2
  • 15
  • 36
  • shouldn't you use some query to change the css class of the displayed element for this background image based on user action, like clicking the button ? that js function should take of displaying this element on click and removing/hiding it when the modal window opens . – vreddy Sep 09 '14 at 18:39
  • @viper not sure what you mean, basically the whole thing is based on [this example] (http://www.jacklmoore.com/colorbox/example2), click on "Outside HTML (AJAX)" and you'll see that loading.gif animation. – rockyraw Sep 09 '14 at 18:43

1 Answers1

0

The rules are something along these lines:

It does not matter what you put in your css in terms or links to images, since it(browser) will only load that resource if the element is on the page and visible! Visible means anything except display:none and different states of that element, say :hover state.

This does not apply to embedded base64 images inside your css files. Those do load with the stylesheet.

Radu Andrei
  • 1,075
  • 10
  • 19