Рендеринг пользовательского набора фотографий с использованием Tumblr JSON - PullRequest
Новая
       6

Рендеринг пользовательского набора фотографий с использованием Tumblr JSON

1 голос
/ 27 января 2011

Я создаю эту пользовательскую тему www.designislikethis.tumblr.com , в которой используются плагины jQuery Masonry и Slider. При создании этой темы я хотел создать свое собственное слайд-шоу с фотосетами, а не возиться со стандартным Flash-приложением.

Я начал с извлечения изображений из JSON каждого поста фотосета по идентификатору поста, используя JS и jQuery.

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

Код, который я использую для извлечения / рендеринга для каждой записи фотосета, выглядит следующим образом: 

    function photoSet() {
    $('.photoset').each(function () {

            var postID = $(this).attr('id');
            var that = $(this);
               $.getJSON("http://designislikethis.tumblr.com/api/read/json?id="+postID+"&callback=?", 
                  function(data) {
                      var postPhotos = data["posts"][0]["photos"];
                      var postPermalink = data["posts"][0];
                            for(var i = 0; i<postPhotos.length; i++) 
                            {
                                var photo250 = new Image();
                                photo250.src = postPhotos[i]['photo-url-250'];
                                postLink = postPermalink["url-with-slug"];
                                var setClass = ".photoset"+ i;
                                var imgClass = ".img"+ i;
                                $(that).find('.slide').append('<a class="'+ setClass +'" href="'+postLink+'"><img class="'+ imgClass +'" src="' +photo250.src+ '"/></a>');
                            }
                 });
              });
   }

Теперь моя проблема заключается в том, что все остальные элементы на моей индексной странице Tumblr не отображаются с помощью JSON, поэтому они загружаются быстрее. К тому времени, когда мой набор фотографий рендерится, его элементы div не будут пропорциональны всему, что загружено вокруг него, и поэтому слайдер изображений не сработает, и вы останетесь в беспорядке визуализированных изображений.

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

Чтобы увидеть размеры моего Javascript и как я называю эту функцию фотосета, смотрите здесь:

http://helloauan.com/apps/DILTtheme/utils.js

Я знаю, что это немного грязно, потому что я новичок во всем этом. :)

Спасибо.

1 Ответ

2 голосов
/ 27 января 2011

Не знаю, поможет ли это, но вы можете попробовать следующее:

Если изображения имеют одинаковый размер, и вы знаете, что этот размер устанавливает для этого параметра ".slide";

Попробуйте предварительно загрузить изображения и запускать слайд-шоу только после их загрузки. например, используя плагин предварительной загрузки .

и использование функции «обратного вызова».

...