diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
commit | c058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch) | |
tree | df20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/api/window | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2 translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip |
unslug ru: move
Diffstat (limited to 'files/ru/web/api/window')
4 files changed, 375 insertions, 0 deletions
diff --git a/files/ru/web/api/window/domcontentloaded_event/index.html b/files/ru/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..7702dcfd24 --- /dev/null +++ b/files/ru/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,146 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - события +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<p><code><font face="Open Sans, Arial, sans-serif">Событие </font>DOMContentLoaded</code> происходит когда весь HTML был полностью загружен и пройден парсером, не дожидаясь окончания загрузки таблиц стилей, изображений и фреймов. Значительно отличающееся от него событие <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> используется для отслеживания только полностью загруженной страницы. Широко распространённой ошибкой является использование <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> в ситуации когда <code>DOMContentLoaded</code> является более подходящим, будьте внимательны.</p> + +<p>{{Note("Синхронный JavaScript останавливает парсинг DOM.")}}</p> + +<p>{{Note("Существуют различные библиотеки, как общего назначения так и специализированные, предлагающие кросс-браузерные методы, позволяющие определить, что DOM готов к использованию.")}}</p> + +<h2 id="Ускорение_работы">Ускорение работы</h2> + +<p>Если вы хотите чтобы DOM был пройден парсером насколько возможно быстро, сразу после запроса пользователем страницы, вы можете попробовать выполнять <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript асинхронно </a>и <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">оптимизировать загрузку таблиц стилей</a> которые обычно замедляют загрузку документа поскольку загружаясь одновременно "крадут" трафик у основного документа.</p> + +<h2 id="Основная_информация">Основная информация</h2> + +<dl> + <dt style="width: 120px; text-align: right; float: left;">Спецификация</dt> + <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="width: 120px; text-align: right; float: left;">Интерфейс </dt> + <dd style="margin: 0px 0px 0px 120px;">Event</dd> + <dt style="width: 120px; text-align: right; float: left;">Всплывает</dt> + <dd style="margin: 0px 0px 0px 120px;">Да</dd> + <dt style="width: 120px; text-align: right; float: left;">Отменяемое</dt> + <dd style="margin: 0px 0px 0px 120px;">Да (несмотря на то, что в спецификации указано как простое событие, которое не является отменяемым)</dd> + <dt style="width: 120px; text-align: right; float: left;">Цель </dt> + <dd style="margin: 0px 0px 0px 120px;">Document</dd> + <dt style="width: 120px; text-align: right; float: left;">Default Action</dt> + <dd style="margin: 0px 0px 0px 120px;">Нет.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Свойство</th> + <th scope="col">Тип</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Возможно ли отменить событие.</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); +</script> +</pre> + +<pre><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); + +for(var i=0; i<1000000000; i++) +{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later. +</script> +</pre> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>9.0</td> + <td>3.1<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<p>[1] Всплытие для этого события поддерживается как минимум с версий Gecko 1.9.2, Chrome 6, и Safari 4.</p> + +<p>[2] Internet Explorer 8 поддерживает событие <code>readystatechange</code>, которое можно использовать для определения готовности DOM. В более ранних версиях Internet Explorer,это событие можно определить циклическим выполнением <code>document.documentElement.doScroll("left");</code>, это событие будет выбрасывать ошибку если DOM не готов.</p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/ru/web/api/window/load_event/index.html b/files/ru/web/api/window/load_event/index.html new file mode 100644 index 0000000000..a8d456806d --- /dev/null +++ b/files/ru/web/api/window/load_event/index.html @@ -0,0 +1,88 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +<p>Событие <code>load</code> происходит когда ресурс и его зависимые ресурсы закончили загружаться.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывает</dt> + <dd style="margin: 0 0 0 120px;">Да</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемое</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">Window</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Нет.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><script> + window.addEventListener("load", function(event) { + console.log("All resources finished loading!"); + }); +</script> +</pre> + +<p> </p> + +<h2 id="Связанные_события">Связанные события</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/ru/web/api/window/requestanimationframe/index.html b/files/ru/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..d451cae62f --- /dev/null +++ b/files/ru/web/api/window/requestanimationframe/index.html @@ -0,0 +1,92 @@ +--- +title: window.requestAnimationFrame() +slug: DOM/window.requestAnimationFrame +tags: + - Анимация +translation_of: Web/API/window/requestAnimationFrame +--- +<div>{{APIRef}}</div> + +<p><code><strong>window.requestAnimationFrame</strong></code> указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. В качестве параметра метод получает функцию, которая будет вызвана перед перерисовкой.</p> + +<div class="note"><strong>Заметка:</strong> Ваш callback метод сам должен вызвать <code>requestAnimationFrame()</code> иначе анимация остановится.</div> + +<p>Вы должны вызывать этот метод всякий раз, когда готовы обновить анимацию на экране, чтобы запросить планирование анимации. Обычно запросы происходят 60 раз в секунду, но чаще всего совпадают с частотой обновления экрана. В большинстве браузеров в фоновых вкладках или скрытых <code><iframe></code>, вызовы <code>requestAnimationFrame()</code> приостанавливаются, для того, чтобы повысить производительность и время работы батареи.</p> + +<p>Callback методу передаётся один аргумент, {{domxref("DOMHighResTimeStamp")}}, который содержит текущее время (количество миллисекунд, прошедших с момента <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">time origin</a>). Когда callback-и, отправленные в очередь с помощью <code>requestAnimationFrame()</code> начинают вызывать несколько callback-ов в одном кадре, каждый получает одинаковый timestamp, хотя для вычисления каждого callback было затрачено время. Этот timestamp - десятичное число в миллисекундах, но с минимальной точностью в 1ms (1000 µs).</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="brush: js notranslate">window.requestAnimationFrame(callback);</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке.</dd> + <dt><code>element</code> {{ optional_inline() }}</dt> + <dd>Необязательный параметр (не используется в Firefox или IE), определяющий элемент, который визуально содержит всю анимацию. Для canvas'а и WebGL'a им должен быть {{ HTMLElement("canvas") }}. Для других элементов вы можете опустить этот параметр для чуть лучшего пользовательского опыта.</dd> +</dl> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<p><code>requestID</code> — длинное целое, являющееся уникальным идентификатором для записи, содержащей callback. Оно не равно нулю, но других предположений о его значении делать не следует. Вы можете передать его в {{ domxref("window.cancelAnimationFrame()") }} для отмены вызова.</p> + +<h2 id="Notes" name="Notes">Пример</h2> + +<pre class="brush: js notranslate">var start = null; +var element = document.getElementById('SomeElementYouWantToAnimate'); + +function step(timestamp) { + if (!start) start = timestamp; + var progress = timestamp - start; + element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)'; + if (progress < 2000) { + window.requestAnimationFrame(step); + } +} + +window.requestAnimationFrame(step);</pre> + +<h2 id="Примечание">Примечание</h2> + +<p>В Edge версиях младше 17 и в Internet Explorer не надежно запускать <code>requestAnimationFrame</code> перед циклом рисования.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#animation-frames', 'requestAnimationFrame')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Без изменений, заменяет предыдущую.</td> + </tr> + <tr> + <td>{{SpecName('RequestAnimationFrame', '#dom-windowanimationtiming-requestanimationframe', 'requestAnimationFrame')}}</td> + <td>{{Spec2('RequestAnimationFrame')}}</td> + <td>Первоначальное описание.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Браузерная совместимость</h2> + +<p id="Specification">{{Compat("api.Window.requestAnimationFrame")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ domxref("window.mozAnimationStartTime") }}</li> + <li>{{ domxref("window.cancelAnimationFrame()") }}</li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li> + <li><a class="external" href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li> + <li><a class="external" href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li> + <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li> +</ul> diff --git a/files/ru/web/api/window/unhandledrejection_event/index.html b/files/ru/web/api/window/unhandledrejection_event/index.html new file mode 100644 index 0000000000..5248e75748 --- /dev/null +++ b/files/ru/web/api/window/unhandledrejection_event/index.html @@ -0,0 +1,49 @@ +--- +title: unhandledrejection +slug: Web/Events/unhandledrejection +translation_of: Web/API/Window/unhandledrejection_event +--- +<p>Событие <strong><code>unhandledrejection</code></strong> происходит, когда {{jsxref("Promise")}} завершен с ошибкой, но на данную ошибку не установлен обработчик.</p> + +<table class="properties"> + <tbody> + <tr> + <td>Всплытие</td> + <td>Нет</td> + </tr> + <tr> + <td>Возможность отмены</td> + <td>Нет</td> + </tr> + <tr> + <td>Target objects</td> + <td>defaultView</td> + </tr> + <tr> + <td>Интерфейс</td> + <td>{{domxref("PromiseRejectionEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush:js;">window.addEventListener("unhandledrejection", function (event) { + console.warn("Внимание: Необработанная ошибка Promise. Позор вам! Причина: " + + event.reason); +}); +</pre> + +<h2 id="Inheritance">Inheritance</h2> + +<p>Событие <code>unhandledrejection</code> реализует {{domxref("PromiseRejectionEvent")}} интерфейс, который наследуется от {{domxref("Event")}}. Вы можете использовать свойства и методы, определенные в данных интерфейсах.</p> + +<p>{{InheritanceDiagram('','','', 'PromiseRejectionEvent')}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{Event("rejectionhandled")}}</li> + <li>{{domxref("PromiseRejectionEvent")}}</li> + <li>{{domxref("Promise")}}</li> +</ul> |