Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2016, 18:59
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Как сделать задержку отображения, пока не отработает скрипт?
Добрый день!

У меня есть галерея, которая выстраивает изображения сеткой на сайте. Но пока скрипт не просчитал их расположение, они загружаются и висят длинной колбасой в контенте.

Скажите, пожалуйста, как мне скрыть их с помощью visibility: hidden; или display: none; пока работает скрипт, а затем, как только он отработает полностью, показать сразу просчитанную галерею?

Сам скрипт:

(function($) {
    $.fn.kirpi4i = function(options) {
        var settings = $.extend({
            'averageHeight': 120,
            'margin': 2,
            'maxInRow': 6
        }, options);
        return this.each(function() {
            var iContainer = $(this),
                icImages = iContainer.find('img'),
                icWidth = iContainer.width(),
                dims = new Array(),
                iciCount = icImages.length;
                
            icImages.each(function(i) {
                dims[i] = new Array($(this).width(), $(this).height());
            });
            
            var cnt = 0;
            var rowI = new Array();
            function row() {
                var ah = settings.averageHeight,
                    wcTemp = 0,
                    tCnt = 0;
                for (var i = cnt; i < iciCount; i++) {
                    var b = 1;
                    var wTemp = parseInt(ah * dims[i][0] / dims[i][1]) + settings.margin * 2;
                    if (wcTemp + wTemp < icWidth) {
                        wcTemp += wTemp;
                        cnt++;
                        tCnt++;
                        if (tCnt == settings.maxInRow) {
                            if (i == iciCount - 2) {
                                cnt++;
                                tCnt++;
                            }
                            rowI.push(new Array(tCnt, b));
                            row();
                            return;
                        }
                    }
                    else {
                        if (i == iciCount - 1) {
                            cnt++;
                            tCnt++;
                            b = -1;
                        }
                        rowI.push(new Array(tCnt, b));
                        row();
                        return;
                    }
                    if (i == iciCount - 1) {
                        rowI.push(new Array(tCnt, b));
                    }
                }
            }
            row();
            
            function getW(b, e, n) {
                var h = settings.averageHeight;
                
                function gw(h) {
                    var ww = 0
                    for (var i = b; i < b + e; i++) {
                        ww += parseInt(h * dims[i][0] / dims[i][1]);
                    }
                    if (n > 0) {
                        if (ww < icWidth - e * settings.margin * 2) {
                            h++;
                            return gw(h);
                        }
                        else {
                            h--;
                            return h;
                        }
                    }
                    else {
                        if (ww > icWidth - e * settings.margin * 2) {
                            h--;
                            return gw(h);
                        }
                        else {
                            h--;
                            return h;
                        }
                    }
                }
                h = gw(h);
                
                return h;
            }
            
            cnt = 0;
            var Dim = new Array();
            $.each(rowI, function(index, item) {
                Dim.push(getW(cnt, item[0], item[1]));
                cnt += item[0];
            });
            
            cnt = 0;
            $.each(Dim, function(index, item) {
                for (var i = cnt; i < rowI[index][0] + cnt; i++) {
                    $(icImages[i]).css({
                        'height': Dim[index],
                        'width': parseInt(Dim[index] * dims[i][0] / dims[i][1]),
                        'display': 'block',
                        'float': 'left',
                        'margin': settings.margin
                    });
                }
                cnt += rowI[index][0];
            });
        });
    };
})(jQuery);


Большое спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2016, 04:51
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,419

snovapavel,
<head>

<script src="jquery.js"></script>
<script src="jquery.kirpi4i.js"></script>
<script>
$(function(){
	$('.container').hide().kirpi4i().show();
});
</script>

</head>
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2016, 05:28
Аспирант
Отправить личное сообщение для snovapavel Посмотреть профиль Найти все сообщения от snovapavel
 
Регистрация: 08.03.2015
Сообщений: 78

Нет, не срабатывает... Галерею скрывает, в коде она есть, но обратно - так и не показывает.
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2016, 06:13
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,419

snovapavel, что-то делаешь не так...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 7 14.10.2016 12:23
Как сделать чтобы кнопка «Назад» работала бы в пределах определенного сайта? Askeer Общие вопросы Javascript 0 12.10.2016 18:58
Как сделать что бы пока курсор находится на блоке что-либо происходило? Cron532 Общие вопросы Javascript 2 17.03.2012 10:03
Как сделать так чтобы один скрипт работал во многих элементах Darkhan Общие вопросы Javascript 2 16.02.2012 15:13
Как сделать как в JQ? faforty Общие вопросы Javascript 8 13.11.2011 23:35