Прелоадер пока выполняется скрипт
Добрый день!
Есть сайт с поиском дилеров. Пользователь выбирает параметры, жмет "поиск" и на страницу выгружается список дилеров, соответствующих заданным параметрам. Выгрузка занимает немалое время, поэтому нужно повесить прелоадер. Код формы поиска: <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 ? |
Вот часть скрипта, которая по моему мнению имеет отношение к проблеме:
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 - это область, в которой выводится список |
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>
|
| Часовой пояс GMT +3, время: 14:35. |