Geek Answers Handbook

Jquery to preload a set of background images

My google-fu doesn't give me that. I have an html page with a series of divs like the one below, among other html:

<div class="featureImage" style="background-image:url('defaultBackground');"> <a href="linkHere" style="background:url('realBackground') no-repeat center center;"> </a> </div>

I find that these function images (realBrackground) do not load in advance, so they only load when the tab that displays them is displayed. I would really like jquery to preload them in the background after the page has been processed by document.ready (), so that when the user clicks on another tab, the function image is displayed instantly, but the load will not slow down the display of the initial page.

The jquery selector I developed was $(".featureImage > a").css("background-image") , but how could I code it so that it goes through and finds all instances of this, and actually preloaded image after page rendering?

UPDATE:

I got an answer clarified using Preloading jQuery Images and jQuery Quick Tip: Extract CSS Background Image

The key was that the .css selector only works in the first match it finds, and that is what gave me the opportunity. That's what I came up with, I would like to have improvements!

 <script> function extractUrl(input) { // remove quotes and wrapping url() return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); } function preloadImages(list) { var img; if (!preloadImages.cache) { preloadImages.cache = []; } for (var i = 0; i < list.length; i++) { img = new Image(); img.src = list[i]; preloadImages.cache.push(img); } } jQuery(document).ready(function() { var items = new Array(); $(".featureImage > a").each(function() { items.push(extractUrl($(this).css("background-image")));}); preloadImages(items); }); </script>

tl; dr: I had to split my selector into two parts and use the each () function to go through and search for all the elements that I need, and extract the URLs and paste them into an array. After I had the array, the previous answers delivered me the rest of the way.

+4
source share
2 answers

I got an answer clarified using Preloading jQuery Images and jQuery Quick Tip: Extract CSS Background Image

The key was that the .css selector only works in the first match it finds, and that is what gave me the opportunity. That's what I came up with, I would like to have improvements!

 <script> function extractUrl(input) { // remove quotes and wrapping url() return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); } function preloadImages(list) { var img; if (!preloadImages.cache) { preloadImages.cache = []; } for (var i = 0; i < list.length; i++) { img = new Image(); img.src = list[i]; preloadImages.cache.push(img); } } jQuery(document).ready(function() { var items = new Array(); $(".featureImage > a").each(function() { items.push(extractUrl($(this).css("background-image")));}); preloadImages(items); }); </script>

tl; dr: I had to split my selector into two parts and use the each () function to go through and search for all the elements that I need, and extract the URLs and paste them into an array. After I had the array, the previous answers delivered me the rest of the way.

+2
source

Link http://thinkpixellab.com/pxloader/

This library actually preloads the images.

 //core file <script type="text/javascript" src="js/PxLoader.js"></script> // Create the loader and queue our 3 images. Images will not // begin downloading until we tell the loader to start. var loader = new PxLoader(), backgroundImg = loader.addImage('images/headerbg.jpg'), treesImg = loader.addImage('images/trees.png'), ufoImg = loader.addImage('images/ufo.png'); // callback that will be run once images are ready loader.addCompletionListener(function() { var canvas = document.getElementById('sample1-canvas'), ctx = canvas.getContext('2d'); ctx.drawImage(backgroundImg, 0, 0); ctx.drawImage(treesImg, 0, 104); ctx.drawImage(ufoImg, 360, 50); }); // begin downloading images loader.start();
+4
source

More articles:


All Articles