Menu
In the below code I am randomly choosing the body element, since it is one of the only elements guaranteed to exist on the page.
For the "trick" to work, we shall use the content property which comfortably allows setting multiple URLs to be loaded, but as shown, the ::after pseudo element is kept hidden so the images won't be rendered:
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
}
it's better to use a sprite image to reduce http requests...(if there are many relatively small sized images) and make sure the images are hosted where HTTP2 is used.
I believe most of the visitors of this question are looking for the answer of "How can I preload an image before the page's render starts?" and the best solution for this problem is using <link> tag because <link> tag is capable to block the further rendering of the page. See preemptive
These two value options of rel (relationship between the current document and the linked document) attribute are most relevant with the issue:
So if you want to load a resource (in this case it's an image) before the rendering process of <body> tag starts, use:
<link rel="preload" as="image" href="IMAGE_URL">
and if you want to load a resource while <body> is rendering but you are planning to use it later on dynamically and don't wanna bother the user with loading time, use:
<link rel="prefetch" href="RESOURCE_URL">
I can confirm that my original code seems to work. I was casually sticking to an image with a wrong path.
Here's a test : http://paragraphe.org/slidetoggletest/test.html
<script>
var pic = new Image();
var pic2 = new Image();
var pic3 = new Image();
pic.src="images/inputs/input1.png";
pic2.src="images/inputs/input2.png";
pic3.src="images/inputs/input3.png";
</script>
http://css-tricks.com/snippets/css/css-only-image-preloading/
Technique #1
Load the image on the element's regular state, only shift it away with background 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 #2
If the element in question already has a background-image applied and you need to change that image, the above won't work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn't possible, try this. Apply the background image to another page element that is already in use, but doesn't 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; }
try with this:
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 it's loaded
For preloading background images set with CSS, the most efficient answer i came up with was a modified version of some code I found that did not work:
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
The massive benefit of this is that you don't need to update it when you bring in new background images in the future, it will find the new ones and preload them!
If you're reusing these bg images anywhere else on your site for form inputs, you probably want to use an image sprite. That way you can centrally manage your images (instead of having pic1, pic2, pic3, etc...).
Sprites are generally faster for the client, since they are only requesting one (albeit slightly larger) file from the server instead of multiple files. See SO article for more benefits:
CSS image sprites
Then again, this might not be helpful at all if you're just using these for one form and you really only want to load them if the user requests the contact form...might make sense though.
http://www.alistapart.com/articles/sprites
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With