Отображать «загрузка», пока все изображения не загружены и jquery Masonry запускает - PullRequest
Новая
       20

Отображать «загрузка», пока все изображения не загружены и jquery Masonry запускает

6 голосов
/ 18 сентября 2011

Я использую плагин jquery Masonry и пытаюсь скрыть весь контент, пока не сработает плагин. Masonry по умолчанию загружает все изображения до его запуска. Я хочу отображать «загрузочный» div, пока не сработает плагин. Я реализовал страницу, которая проверяет разрешение выше 1024px, а затем отображает «загрузочный» div при загрузке страницы, но сейчас содержимое страницы появляется до срабатывания плагина. 

<script>

$(document).ready(function() {
    $('#content').show();
    $('#loading').hide();
});

$(function(){

var $container = $('#container');
var width = $(window).width(); 
var height = $(window).height(); 

if ((width > 1024  )) {

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box',
    columnWidth: 120,
      });
    });

    }
    else {
    //load the css styles for screen res below 1024
    }

});

</script>

См. Рабочий пример здесь.

Как видите, между появлением контента и запуском плагина существует задержка. Надеетесь, что кто-нибудь может помочь мне задержать модуль отображения контента после триггера?

Приветствия - Джесси

Ответы [ 3 ]

8 голосов
/ 08 ноября 2011

Masonry добавляет класс css "masonry" в контейнер после того, как он заканчивает установку кирпичей. Просто добавьте правила CSS, чтобы скрыть DIV.

Например, если у вас есть 

<div id="container">
    <div id="loading">Loading...</div>
    [items to use in the masonry layout]
    <div class="box">1</div>
    <div class="box">2</div>
</div>

тогда в CSS используйте 

#container.masonry #loading {display: none}

и имеют правила, которые делают box невидимыми до тех пор, пока плагин не завершит работу 

#container .box {position: absolute; top: -1000px; left: -1000px}
В любом случае

кладка придаст ей встроенные стили для box для position: absolute, top и left. Вам, конечно, придется адаптировать это к вашему собственному сайту.

Это должно привести к исчезновению DIV с идентификатором «loading» после того, как каменная кладка будет сделана при настройке ящиков.

5 голосов
/ 18 сентября 2011

Вместо размещения вызовов .show() и .hide() внутри $(document).ready(), поместите их внутри imagesLoaded: 

$container.imagesLoaded( function(){
  $('#content').show();
  $('#loading').hide();
  /* other stuff... */
});

Поскольку document может быть готов до загрузки изображений, поэтому вы видите не полностью загруженную страницу.

4 голосов
/ 18 сентября 2011

довольно просто:

использовать окно загрузки

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

...