Как динамически создать список HTML для добавления в тело, используя jQuery $ ('...') и .load () и Fancybox - PullRequest
Новая
       9

Как динамически создать список HTML для добавления в тело, используя jQuery $ ('...') и .load () и Fancybox

0 голосов
/ 23 июля 2011

Мне нужна функция, которая будет искать все якоря с классом .fancybox и затем загружать их изображения в кэш браузера для быстрого доступа после полной загрузки страницы.

Сейчас я нахожусьделать что-то, что просто кэширует изображения (позволяя им мгновенно всплывать при первом нажатии на якорь Fancybox), но это не динамически генерируемый список, поэтому вам нужно вручную добавить каждую ссылку на изображение.1004 * Вот код: 

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

Как построить этот список изображений и динамически src = "..." для каждого экземпляра, где есть тег привязки с классом .fancybox, используяHREF нашли внутри якоря?

Спасибо, Скотт.

Ответы [ 4 ]

0 голосов
/ 24 июля 2011

Спасибо за предложения, они направили меня в правильном направлении.Самое простое, что я нашел, - это добавить каждое найденное изображение по отдельности после полной загрузки страницы, включая все изображения. 

    $(window).load(function() {
        $('a.fancybox').each(function() {
            $('<div><img style="display:none;" src="' + this.href + '" alt="" /></div>')
            .appendTo("body");
        });
    });
0 голосов
/ 23 июля 2011

Хотелось бы что-нибудь подобное? 

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

Вместо push может быть pushStack?

0 голосов
/ 23 июля 2011

Браузер будет загружать изображение всякий раз, когда вы назначаете свойство src: 

$('a.fancybox').each(function() { 
  var img = new Image();
  img.src = this.href; // Browsers start loading the file at this point
});
0 голосов
/ 23 июля 2011

вы бы попробовали что-то подобное: 

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

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

});

Вы также можете подготовить список изображений scr для него и поместить каждый следующий элемент (согласно некоторому счетчику): 

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