How to dynamically build list of HTML to append to body using jQuery $('...') and .load() and Fancybox

I would like a function that will look for all anchors with a class of .fancybox and then load their images into the browser cache for quick access once the page has been fully loaded.

Right now I am doing something that caches the images just fine, (allowing them to pop up instantly the first time you click on the Fancybox anchor), but it is not a dynamically generated list, so you need to manually add each image link.

Here is the code:

$(window).load(function(){
$('<div style="display:none;"><img src="..." /><img src="..." /></div>')
    .appendTo("body");
});

How do you construct that list of images and src="..." dynamically for every instance where there is an anchor tag with a class of .fancybox, u开发者_运维问答sing the href found inside the anchor?

Thanks, Scott.

Would something like this work?

$(document).ready(function(){
   var imgs = [];                   // array of jQuery objects
   $("a.fancybox").each(function(){
      imgs.push($('<img src="' + $(this).attr('href') + '" />');
   });
});

Instead of push maybe pushStack?

Browser will load the image whenever you assign the src property:

$('a.fancybox').each(function() { 
  var img = new Image();
  img.src = this.href; // Browsers start loading the file at this point
});

you would try something like that:

$(".fancybox").each(function() {

   $(this).attr('src', 'PATH TO IMAGE');

});

You can also prepare a simle list of images scr for it before and put each next element(according to some counter):

var imagesSrc =   [ "src1\folder1\...", "src2\...", ....]

Thanks for the suggestions, they got me pointed in the right direction. The thing I found easiest was to append each image individually that is found, after the page has fully loaded, including all images.

    $(window).load(function() {
        $('a.fancybox').each(function() {
            $('<div><img style="display:none;" src="' + this.href + '" alt="" /></div>')
            .appendTo("body");
        });
    });