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

Question

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

Я начал с вытаскивания изображений из 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, поэтому они нагрузка быстрее. К тому моменту, когда мой набор фотографий показывает, что divs непропорционально всему, что загрузилось вокруг него, и поэтому слайдер изображения не будет загружаться, и вы останетесь с беспорядком визуализированных изображений.

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

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

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

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

Спасибо.

Answer 1

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

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

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

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