Иногда в передней части работы разработки, чтобы получить информацию о изображении, нам необходимо правильно получить размер и размер изображения после загрузки изображения, и выполнить соответствующую функцию обратного вызова, чтобы изображение создало определенный эффект отображения. Эта статья в основном организует несколько распространенных методов для оценки завершения загрузки изображений, а также объясняет и объясняет ее посредством комбинации кода и практических применений.
Метод нагрузки
Выполните последующий код Javascipt, добавив атрибут Onload в тег IMG и заполняя соответствующую функцию. В следующем примере кода элемент IMG не отображается по умолчанию. Определено нагрузкой, что изображение отображается после завершения нагрузки.
Кода -копия выглядит следующим образом:
<img onload = "get (this)" src = "..." "style = 'specile: none' />
<script type = "text/javascript">
функция get (ts) {
ts.shyle.display = 'block'; // показать картинки
}
</script>
Преимущества: раздел кода JavaScript может быть размещен в любой части страницы для загрузки и может использоваться на большинстве произвольных изображений. Это относительно просто в использовании и простой для понимания.
Недостатки: атрибут Onlaod должен быть размещен по каждому тегу, что не применимо в некоторых случаях, когда HTML -код не может быть непосредственно манипулировать или если код должен быть упрощен.
Нативный метод Джаваска
Выберите изображение с указанным идентификатором, укажите метод обратного вызова через нагрузку и подсказку с словом «Загрузка изображения заполнено» появляется после того, как изображение загружено.
Кода -копия выглядит следующим образом:
<img id = "pic1" src = "..." />
<script language = "javascript">
document.getElementById ("pic1"). Onload = function () {
оповещение («Загрузка изображения завершена»);
}
</script>
Преимущества: простые и простые в использовании, не влияя на код HTML.
Недостатки: может быть указан только один элемент, и код Javascipt должен быть размещен ниже элемента изображения
jQuery Метод
Для каждого события привязки элемента изображения с классом PIC1 элемент постепенно появляется через метод нагрузки jQuery.
Обратите внимание, что не связывайте событие загрузки в $ (document) .ready ().
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
$ (function () {
$ ('. pic1'). hay (function () {
$ (this) .load (function () {
$ (это) .fadein ();
});
});
})
</script>
Преимущества: события элементов могут быть связаны партиями и не влияют на содержание кода HTML
Недостатки: требуется поддержка библиотеки jQuery, и код должен быть размещен ниже элемента, который необходимо управлять.