Иногда вам нужно получить размер изображения, который необходимо загрузить только после загрузки изображения. Найти метод?
1. Загрузить событие
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> img - событие загрузки </title>
</head>
<тело>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> загрузка ... </p>
<script type = "text/javascript">
img1.onload = function () {
p1.innerhtml = 'загружен'
}
</script>
</body>
</html>
Проверьте, все браузеры показывают «загруженные», указывающие, что все браузеры поддерживают событие нагрузки IMG.
2. Событие ReadyStateChange
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> img - readystateChange Event </title>
</head>
<тело>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> загрузка ... </p>
<script type = "text/javascript">
img1.onreadystatechange = function () {
if (img1.readystate == "overse" || img1.readystate == "загружен") {
p1.innerhtml = 'readystatechange: загружен'
}
}
</script>
</body>
</html>
Готовая площадка завершена и загружена, что означает, что изображение было загружено. Тестирование IE6-IE10 поддерживает это событие, а другие браузеры-нет.
Iii. Полный атрибут IMG
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<title> IMG - Полный атрибут </title>
</head>
<тело>
<img id = "img1" src = "http://pic1.xxx.com/wall/f/51c3bb99a21ea.jpg">
<p id = "p1"> загрузка ... </p>
<script type = "text/javascript">
функция imgload (img, обратный вызов) {
var Timer = setInterval (function () {
if (img.complete) {
обратный вызов (IMG)
ClearInterval (таймер)
}
}, 50)
}
imgload (img1, function () {
p1.innerhtml ('загружен')
})
</script>
</body>
</html>
Опрос постоянно контролирует полный атрибут IMG. Если это правда, это означает, что изображение было загружено, а опрос остановлен. Это свойство поддерживается всеми браузерами.