Прелоадер пока выполняется скрипт

[agr]

Добрый день!

Есть сайт с поиском дилеров. Пользователь выбирает параметры, жмет "поиск" и на страницу выгружается список дилеров, соответствующих заданным параметрам.

Выгрузка занимает немалое время, поэтому нужно повесить прелоадер.

Код формы поиска:

<form name="search" method="get" onsubmit="return (this.q.value == '') ? false : true;" action="/">
            <div class="corvax-col3">
                <label>Страна:</label>
                <select id="countrySelect">
                    <?
                    $arFilter = Array(
                        "IBLOCK_ID"=>1,
                        "ACTIVE"=>"Y",
                    );
                    $arSelect = Array(
                        "IBLOCK_ID",
                        "ID",
                        "NAME",
                    );
                    $request = CIBlockElement::GetList(
                        array("SORT"=>"ASC"),
                        $arFilter,
                        false,
                        false,
                        $arSelect

                    );

                    while($ob = $request->GetNext()):
                    ?>
                    <option value="<?=$ob['ID']?>"><?=$ob['NAME']?></option>
                    <?endwhile;?>
                </select>
            </div>

            <div class="corvax-col3">
                <label>Регион:</label>
                <select id="citySelect">
                <option value="0">Любой</option>

                </select>
            </div>

            <div class="corvax-col3">
                <label>Город:</label>
                <input id="pac-input" class="controls" type="text" placeholder="Введите название города">
            </div>

            <div class="corvax-col3">
                <label>Радиус:</label>
                <select id="rad_range">
                <option value="20">20км</option>
                <option value="50">50км</option>
                <option value="100">100км</option>
                <option value="150">150км</option>
                <option value="200">200км</option>
                <option value="250">250км</option>
                <option value="500">500км</option>   
                </select>
            </div>
            <div class="clearfix"></div>
            <div class="corvax-col3 pad-top-col">
                <label>Тип:</label>
                <select id="typeSelect">
                    <option value="0">Любой</option>
                    <?
                    $arFilter = Array(
                        "IBLOCK_ID"=>3,
                        "ACTIVE"=>"Y",
                    );
                    $arSelect = Array(
                        "IBLOCK_ID",
                        "ID",
                        "NAME",
                    );
                    $request = CIBlockSection::GetList(
                        array("SORT"=>"ASC"),
                        $arFilter,
                        false,
                        $arSelect,
                        false
                    );

                    while($ob = $request->GetNext()):
                        ?>
                        <option value="<?=$ob['ID']?>"><?=$ob['NAME']?></option>
                    <?endwhile;?>
                </select>

            </div>

            <div class="corvax-col8 pad-top-col">
				<label>Товар/услуги:</label>
                <div class="multiselect">
                    <div class="selectBox">
                        <select id="categorySelect" disabled>
                            <option value="0">Любой</option>
                        </select>
                        <div class="overSelect"></div>
                    </div>
                    <div id="checkboxes">
                    </div>
                </div>
            </div>
            <script>
                var expanded = false;

                $('.selectBox').click(function(){
                    if($('#categorySelect').prop('disabled')) {
                        expanded = true;
                    }
                    var checkboxes = document.getElementById("checkboxes");
                    if (!expanded) {
                        checkboxes.style.display = "block";
                        expanded = true;
                    } else {
                        checkboxes.style.display = "none";
                        expanded = false;
                    }
                });
                $('#checkboxes').click(function(){
                    var result = [];
                    $('#checkboxes input[type=checkbox]').each(function(indx, element){
                        if($(element).prop("checked")) {
                            result.push($(element).val());
                        }
                    });
                    if(result.length == 0)
                        $('#categorySelect option').html('Любая');
                    else
                        $('#categorySelect option').html('Выбранные');
                });
                $(document).mouseup(function (e) {
                    var elem = $('#checkboxes');
                    if ($(e.target).hasClass('overSelect')){ } else { expanded = false;}
                    if (e.target != elem[0] && !elem.has(e.target).length){
                        elem.hide();
                    } else { expanded = true;}

                });
                $('form[name=search]').click(function(e){
                    if(e.target.id == 'resetSearchForm') {
                       
                        $('#categorySelect').prop('disabled', 'disabled');
                        expanded = false;
                        $('#categorySelect option').html('Любая');
                    }
                });
            </script>
            <style>
                #categorySelect, .multiselect, .selectBox {
                    max-width: 100%;
                    width: 95%;
                }
                #pac-input {
                    width: 178px;
                }
                .pad-top-col {
                    padding-top: 10px;
                }
                .corvax-col8 {
                    width: 75%;
                    float: left;
                }
                .selectBox {
                    position: relative;
                }
                .overSelect {
                    position: absolute;
                    left: 0; right: 0; top: 0; bottom: 0;
                }
                #checkboxes {
                    display: none;
                    border: 1px #1e90ff solid;
                    background-color: white;
                    position: absolute;
                    z-index: 100;
                    height: 83px;
                    width: 619px;
                    overflow-y: scroll;
                }
                #checkboxes label {
                    display: block;
                    font-size: 11px;
                    padding-left: 7px;
                    padding-right: 10px;
                    margin-right: 0px;
                }
                #checkboxes label input {
                    margin-left: 0px;
                }
                #checkboxes label:hover {
                    background-color: #1e90ff;
                }
            </style>

            <div class="corvax-dealer-buttons">
                <button type="button" onclick="searchLocations(false)">Показать</button>
                <button type="reset" id="resetSearchForm">Сбросить</button>
            </div>
        </form>
    </div>

Можно ли повесить прелоадер на событие онклик: searchLocations ?

[agr]

Вот часть скрипта, которая по моему мнению имеет отношение к проблеме:

if(!dealers.length){
            $.getJSON("/include/data.php", {
                lat: map.getCenter().lat(),
                lng : map.getCenter().lng(),
                radius: radius,
                type: $('#typeSelect').val(),
                category: categorySelect              
            }, function(json){          
                dealers = json;               

                if (json == null) {
                    $("#sidebar").html('Ничего не найдено.');
                    $('#numberFoundDealers').text('(Найдено: 0)');
                    return;
                }

                var counter = 0;
                for (i = 0; i < json.length; i++) {
                    category_count = 0;
                    

                    if(json[i].lat == null || json[i].lng == null){
                        continue;
                    }
                    var point = new google.maps.LatLng(json[i].lat, json[i].lng);                    
                    // console.log("karta sol`");  
                    if(distHaversine(point, center) < radius && fromUser == true){

                    }else{
                    if(fromUser == true){continue};
                } 
                 if(json[i].country != cur_country && fromUser == false && frommap == false){
                    continue;
                }                     
                    if (distHaversine(point, center) < radius || ($('#citySelect').val() == "0" && frommap == false)) {
                       
                        var canUse = 1;
                        if(categorySelect[0] != "0")
                        {
                            canUse = 0;
                            for(var j in json[i].categories){
                                 for(var n in  categorySelect){
                                if(json[i].categories[j] == categorySelect[n]){                                 
                                    category_count++;
                                }
                                
                            }
                            if(category_count == categorySelect.length){ 
                                canUse = 1;
                                category_count = 0;
                               
                            }
                            }
                        }
                         if($('#citySelect').val() != "0" || frommap != false || fromUser == true){                                
                                  json[i].distance =  calculateTheDistance(json[i].lat,json[i].lng,map.getCenter().lat(),map.getCenter().lng());                                
                        }


                        if(!canUse)
                            continue;

                        canUse = 1;
                        if(parseInt($('#typeSelect').val()))
                        {
                            canUse = 0;
                            for(j in json[i].types)
                                if(json[i].types[j] == $('#typeSelect').val())
                                    canUse = 1;
                        }

                        if(!canUse)
                            continue;

                         counter++;                         
                         if($('#citySelect').val() != "0" || frommap != false || fromUser == true){ 
                        dealers[i].point = point;
                        locdata.push(json[i]);
                        }else{
                        dealers[i].point = point;
                        locdata.push(json[i]); 
                        //createMarker(point, dealers[i]);
                        }
                    }
                } 
                if($('#citySelect').val() != "0" || frommap != false || fromUser == true){
                    locdata.sort(function(a,b){                            
                            if(parseFloat(a.distance) <  parseFloat(b.distance)) 
                                 return -1;
                              if(parseFloat(a.distance) >  parseFloat(b.distance))
                                   return 1;
                              return 0;
                        });                         
                } 
                 if($('#typeSelect').val()== "2"){
                 if(locdata.length > 1){   
                        locdata = bdcsort(locdata);   
                        }                 
                          
                        }      

                 $.each(locdata,function(_,val){   
                     if(val){
                             createMarker(val.point, val);
                         }
                       });           
                                 
                $('#numberFoundDealers').text('(Найдено: ' + counter + ')');
                $("#sidebar").append(side_bar_html);
            });
        }

        if(dealers.length)
        {                            
            var counter = 0;           
            for (i = 0; i < dealers.length; i++) {
                category_count = 0;
                if(dealers[i].lat == null || dealers[i].lng == null){
                        continue;
                    }
                var point = new google.maps.LatLng(dealers[i].lat, dealers[i].lng);
                if(distHaversine(point, center) < radius && fromUser == true){

                   }else{
                    if(fromUser == true){continue};
                } 
                 if(dealers[i].country != cur_country && fromUser == false && frommap == false){
                    continue;
                }   
                if (distHaversine(point, center) < radius || ($('#citySelect').val() == "0" && frommap == false)) {
                    var canUse = 1;
                    if(categorySelect[0] != "0")
                    {
                        canUse = 0;
                        for(var j in dealers[i].categories)
                            for(var n in  categorySelect){
                                if(dealers[i].categories[j] == categorySelect[n]){                                   
                                category_count++;
                            }
                            }
                            if(category_count == categorySelect.length){                                
                                canUse = 1;
                                category_count = 0;                               
                            }
                    }
                    if(dealers[i].distance){
                       delete dealers[i].distance;
                    }
                     if($('#citySelect').val() != "0" || frommap != false || fromUser == true){                               
                                dealers[i].distance =  calculateTheDistance(dealers[i].lat,dealers[i].lng,map.getCenter().lat(),map.getCenter().lng());                                   
                        }

                    if(!canUse)
                        continue;

                    canUse = 1;
                    if(parseInt($('#typeSelect').val()))
                    {
                        canUse = 0;
                        for(j in dealers[i].types)
                            if(dealers[i].types[j] == $('#typeSelect').val())
                                canUse = 1;
                    }

                    if(!canUse)
                        continue;

                    counter++;                         
                        if($('#citySelect').val() != "0" || frommap != false || fromUser == true){ 
                        dealers[i].point = point;
                        locdata.push(dealers[i]);
                        }else{
                        dealers[i].point = point;
                        locdata.push(dealers[i]); 

                        //createMarker(point, dealers[i]);
                        }
                    }
                }
               
                if($('#citySelect').val() != "0" || frommap != false || fromUser == true){
                    locdata.sort(function(a,b){                            
                            if(parseFloat(a.distance) <  parseFloat(b.distance)) 
                                 return -1;
                              if(parseFloat(a.distance) >  parseFloat(b.distance))
                                   return 1;
                              return 0;
                        });                         
                } 
                
                 if($('#typeSelect').val()== "2"){ 
                  if(locdata.length > 1){  
                        locdata = bdcsort(locdata);
                        }                    
                          
                        }      
                        
                 $.each(locdata,function(_,val){   
                     if(val){
                             createMarker(val.point, val);
                         }
                       });               
            $('#numberFoundDealers').text('(Найдено: ' + counter + ')');           
            $("#sidebar").append(side_bar_html);
        }
    }

sidebar - это область, в которой выводится список

[pureJS]

agr, вот это как раз тот случай, который показывает уровень знаний тех программистов, которые везде суют JQuery и без неё не могут обойтись. Зачем пытаться писать страницы, если нет основополагающих знаний? И уж тем более через JQuery! И сам ничего понимать не будешь, и другим очень сильно затруднишь понимание твоего скрипта. Или как ты думаешь - почему тебе никто не ответил? Более того ещё и пользователи будут вынуждены ждать загрузки страницы.

В русском языке также нет слова dealer'ы! Ведь не трудно же по-русски написать "Продавцы"?

Надо изучить основы языка и тогда таких вопросов вообще не будет! В этом помогут последние 2 ссылки в моей подписи - это книги от Netscape (создателей JS).

Вот как работают заставки при ожидании на чистом JS:

<html><head>
<style type="text/css">
#preloader
{
	width:32px;
	height:32px;
	background:url('preloader.gif') no-repeat
}
</style>
<script type="text/javascript">
var httpRequest = getXmlHttp();

function getXmlHttp()
{
	//...........
	//return XMLHttpRequest
}

function searchLocations()
{
	var p = document.getElementById('preloader');
	//добавляем картинку ожидания:
	p.style.display = 'block';

	//отправляем AJAX запрос:
	httpRequest.onreadystatechange = updateSidebar;
	httpRequest.open('GET', url, true);
	httpRequest.send('');
}

function updateSidebar()
{
	try
	{
		if(httpRequest.readyState == 4)
		{
			if(httpRequest.status == 200)
				document.getElementById('sidebar').innerHTML = httpRequest.responseText;
			else
				document.getElementById('sidebar').innerHTML = 'Возникли трудности при запросе.';

			//убираем картинку ожидания:
			var p = document.getElementById('preloader');
			p.style.display = 'none'
		}		
	}
	catch (e)
	{
		console.log('Ошибка: ' + e.description)
	}
}
</script>
</head><body>
<button type="button" onclick="searchLocations(false)">Показать</button>
<div id="preloader"></div>
</body></html>