load-images
DEPRECATED: Setting the src attribute directly does the same thing. This command will be removed in version 3.
Syntax
load-images: (attribute that contains an image location) [every (time)] [after (time)];
This is a handy way to lazy load images. We use it on this site to load up images only after Active CSS has initialised and is running. This makes web pages start-up faster. It doesn't require a special plugin. This command will work with img tags or basic picture source tags. There may be a better way to do this native, so it is worth keeping an eye on what is possible in that regard.
To use, put the "srcset" or "src" image location into a different attribute and not the "srcset" or "src" attribute. When the load-images command is run, it takes the image location from the specified attribute and puts it into the "srcset" or "src" attribute. Then the first attribute gets deleted, so it will never try to load again.
On this website we use the attribute "data-cjs-image" on our images. Whenever an image is drawn on the website, a draw event is triggered that runs the load-images command. So all the images are lazy-loaded. What we also do is put a tiny 1 pixel transparent image into our src and srcset tags, so that the "missing" image box does not show. But this is optional.
Click here if you want a 1 pixel transparent png called "tiny.png".
The Active CSS code below is all we use on this website to lazy-load all our images:
/* img[data-cjs-image] means select all img tags on the page with a data-cjs-image attribute */
img[data-cjs-image]:draw {
load-images: data-cjs-image;
}And example HTML:
<img src="/images/tiny.png" data-cjs-image="/images/small-sun.png" alt="">If you wanted to roll your own version of this just using Active CSS commands, you would simply use the set-attribute command on the src attribute setting it to a {@data-cjs-image} type attribute, with the same event selector as above, and then follow it with the remove-attribute command on the "pretend" src attribute.
Fading in images
If you want to fade in all images when they are drawn for the very first time, the easiest way is to add this extra code. In your CSS:
img {
opacity: 0;
transition: opacity 1s linear;
}And in your Active CSS:
img:draw {
opacity: 1 after stack;
}It's not completely perfect, but that might help. We use that code on this site. It's on the draw event rather than the load event, as the load event for images doesn't work as you think it would on browsers. There is a "whenVisible" event coming soon to Active CSS, which will get triggered as scrolling happens on the page to make elements visible, but we've not implemented that yet.
A note on site images, background-url handling or just deferring anything.
On this site, the snippet below defers loading images until after page load.
body:init {
footer {
background: url("/images/activecss-back-footer.jpg");
}
}In fact, just putting regular CSS into the body:init event will defer whatever you want, as the init event will only run once Active CSS is running.
Regarding other sorts of background-url handling, you could just run a regular CSS command like the above where you need it, with an attribute variable substitution pointing to an attribute containing the url you want to replace with, eg. "background: url('{@data-my-background-image'");", with the attribute containing the image url being in the target selector or the event selector. Attribute or variable substitition is allowed for every Active CSS action command.