Best IT Recipes

CSS image preload

I have a hidden contact form that expands with the click of a button. Its fields are set as CSS background images, and they always appear a little later than the divs that were switched.

I used this snippet in the <head> section but no luck (after I cleared the cache):

 <script> $(document).ready(function() { pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png"; pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png"; pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png"; }); </script>

I use jQuery as my library, and it would be great if I could use it to organize this problem.

Thanks for your words.

+105
css image background preload preloader
03 Sep '09 at 12:34
source share
12 answers

I can confirm that my source code is working. I accidentally stuck to an image with the wrong path.

Here's the test: http://paragraphe.org/slidetoggletest/test.html

 <script> pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="images/inputs/input1.png"; pic2.src="images/inputs/input2.png"; pic3.src="images/inputs/input3.png"; </script>
+27
03 Sep '09 at 17:52
source share

CSS image preload only

In the code below, I randomly select the body element, as this is one of the few elements that are guaranteed to exist on the page.

In order for the trick to work, we will use the content property, which allows you to conveniently load multiple URLs, but, as shown, ::after is hidden, so the images will not be displayed:

 body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg); // load images }

demonstration



It is better to use a sprite image to reduce http requests ... (if there are a lot of relatively small images) and make sure that the images are placed where HTTP2 is used.

+231
Jan 17 '13 at 23:47
source share

Preloading images using the <link> HTML tag

I believe most visitors to this question are looking for the answer, "How can I preload the image before rendering the page?" and the best solution for this problem is to use <link> because the <link> is able to block further page rendering. See proactive

These two values โ€‹โ€‹of the rel value (the relationship between the current document and the linked document) are most relevant for this problem:

  • prefetch : load the specified resource when the page is displayed
  • preload : load this resource before starting to render the page

Therefore, if you want to load a resource (in this case, an image) before starting the <body> rendering process, use:

 <link rel="preload" as="image" href="IMAGE_URL">

and if you want to load the resource during the <body> rendering but plan to use it dynamically later and donโ€™t want to bother the user with the loading time, use:

 <link rel="prefetch" href="RESOURCE_URL">
+14
Jan 22 '17 at 7:43 on
source share

http://css-tricks.com/snippets/css/css-only-image-preloading/

Technique number 1

Load the image into the regular state of the element, just move it to its original position. Then move the background position to display it on hover.

 #grass { background: url(images/grass.png) no-repeat -9999px -9999px; } #grass:hover { background-position: bottom left; }

Technique number 2

If the background image is already applied in the element in question, and you need to change this image, the above will not work. Usually you can find the sprite here (combined background image) and just shift the background position. But if this is not possible, try this. Apply the background image to another element of the page that is already in use but does not have a background image.

 #random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; } #grass:hover { background: url(images/grass.png) no-repeat; }
+13
Jan 06 '11 at 12:50
source share

try the following:

 var c=new Image("Path to the background image"); c.onload=function(){ //render the form }

With this code, you preload the background image and render the form when loading

+9
03 Sep '09 at 12:51
source share

For preloading background images set using CSS, the most efficient answer I came up with was a modified version of some code that I found that didn't work:

 $(':hidden').each(function() { var backgroundImage = $(this).css("background-image"); if (backgroundImage != 'none') { tempImage = new Image(); tempImage.src = backgroundImage; } });

The huge advantage is that you do not need to update it, when you introduce new background images in the future, it will find new ones and preload them!

+6
Oct 19
source share

If you reuse these bg images anywhere on your site to enter forms, you probably want to use a sprite image. This way you can centrally manage your images (instead of pic1, pic2, pic3, etc.).

Sprites are generally faster for the client, as they request one (albeit slightly larger) file from the server instead of multiple files. See Article SO for additional benefits:

CSS sprites

And again, this may not be useful at all if you just use them for one form, and you really only want to download them if the user requests a contact form ... it might make sense.

http://www.alistapart.com/articles/sprites

+5
03 Sep '09 at 21:26
source share

how about loading this background image somewhere hidden. This way it will load when the page is open and will not execute anytime after creating the form using ajax:

 body { background: #ffffff url('img_tree.png') no-repeat -100px -100px; }
+1
03 Sep '09 at 12:52
source share

The only way is Base64 to encode the image and place it inside the HTML code so that it does not need to contact the server to download the image.

This will encode the image from the URL so you can copy the code of the image file and paste it into your page like this ...

 body { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); }
+1
Sep 25 '11 at 6:00
source share

You can use this jQuery waitForImage plugin, or you can put the images in a hidden div or (width: 0 and height: 0) and use the onload event on the images.

If you have only 2-3 images, you can bind events and fire them in a chain, so after each image you can make some code.

+1
Mar 14 '12 at 23:05
source share

If there is no way to change the CSS code and preload the images using CSS rules for :before or :after aliases, a different approach will be used using JavaScript code that can be used for CSS rules of loaded stylesheets. To make it work, scripts must be included after the stylesheets in HTML, for example, before closing the body tag or immediately after styles.

 getUrls() { const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/; let urls = []; for (let i = 0; i < document.styleSheets.length; i++) { let cssRules = document.styleSheets[i].cssRules; for (let j = 0; j < cssRules.length; j++) { let cssRule = cssRules[j]; if (!cssRule.selectorText) { continue; } for (let k = 0; k < cssRule.style.length; k++) { let property = cssRule.style[k], urlMatch = cssRule.style[property].match(urlRegExp); if (urlMatch !== null) { urls.push(urlMatch[2]); } } } } return urls; } preloadImages() { return new Promise(resolve => { let urls = getUrls(), loadedCount = 0; const onImageLoad = () => { loadedCount++; if (urls.length === loadedCount) { resolve(); } }; for (var i = 0; i < urls.length; i++) { let image = new Image(); image.src = urls[i]; image.onload = onImageLoad; } }); } document.addEventListener('DOMContentLoaded', () => { preloadImages().then(() => { // CSS images are loaded here }); });
+1
28 Oct '16 at 19:19
source share

If the page elements and their background images are already in the DOM (i.e. you are not creating / changing them dynamically), then their background images will already be loaded. At this point you can see the compression methods :)

0
Sep 03 '09 at 12:45
source share


More articles:


All Articles