html - Long loading Javascript (modal window) -
on site http://nashedom.ru there js scripts. fast.
the modalka fancybox pages (for login users, in user cabinet, page объявления -> добавление объявления) slow. in chrome loading 25-28 seconds. in firefox - 2,5 seconds.
the data taken out of context.
html:
{% load hosts %} <div class="b-header"> <div class="b-header__menu"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="b-menu"> <a>...</a> <a>...</a> <a>...</a> <a>...</a> <span class="b-menu__item btn_change-location"> <a href="#change-location" class="fancybox dashed"> {% if user.is_authenticated %} view ads on site: {% if user.districts.all.count > 1 %} {% district in user.districts.all %} {% if forloop.last %} <span>{{ district }}</span> {% else %} <span>{{ district }},</span> {% endif %} {% endfor %} {% else %} {% district in user.districts.all %} <span>{{ district }}</span> {% endfor %} {% endif %} {% if user.regions.all.count > 1 %} {% region in user.regions.all %} {% if forloop.last %} <span>{{ region }}</span> {% else %} <span>{{ region }},</span> {% endif %} {% endfor %} {% else %} {% region in user.regions.all %} <span>{{ region }}</span> {% endfor %} {% endif %} {% if user.cities.all.count > 1 %} {% city in user.cities.all %} {% if forloop.last %} <span>{{ city }}</span> {% else %} <span>{{ city }},</span> {% endif %} {% endfor %} {% else %} {% city in user.cities.all %} <span>{{ city }}</span> {% endfor %} {% endif %} {% else %} view ads on site: {% endif %} </a> </span> </div> </div> </div> </div> </div> templates modal window
{% load hosts %} {% load widget_tweaks static %} <div id="change-location"> <form action="{% host_url "setlocation" host "www" %}" method="post"> {% csrf_token %} <div id="chose-city-wrap"> <div class="b-modal__title">select city</div> <p> <div class="b-modal__item"> <span>{{ location_form.country.label }}</span> {{ location_form.country }} </div> </p> <p> <div class="b-modal__item"> <span>{{ location_form.districts.label }}</span> {{ location_form.districts }} </div> </p> <p> <div class="b-modal__item"> <span>{{ location_form.regions.label }}</span> {{ location_form.regions }} </div> </p> <p> <div class="b-modal__item"> <span>{{ location_form.cities.label }}</span> {{ location_form.cities }} </div> </p> <br /> <div class="b-modal__item b-modal__item_btn"> <input class="b-btn b-btn_red" type="submit" value="Сохранить"> </div> </div> </form> </div> <!-- end snippet --> cities download form on page brakes modal window!
<fieldset> <legend>the territory of distribution of ads</legend> {{ form.country|add_class:"b-input__input js-select" }} {{ form.districts|add_class:"b-input__input js-select chosen-select" }} {{ form.regions|add_class:"b-input__input js-select chosen-select" }} {{ form.cities|add_class:"b-input__input js-select chosen-select" }} {# form.geo|add_class:"b-input__input" #} </fieldset>
as explain it, have lot of data (countries, cities), if in php, lock page until retrive datas.
to have shorter loading time, have make in js (ajax).
you load page cities, countries, ... without data.
once page loaded (document.ready), call ajax fill cities, countries , on.
Comments
Post a Comment