Задание:
Есть
html-документ:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма просмотра изображений с прелоадером на JavaScript</title>
<link rel="stylesheet" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<input id="imageSourceInput" type="text" value="">
<button id="replaceImageButton">Загрузить</button>
<div id="imageContainer">
<div id="preloaderText"></div>
<img id="replaceableImage" src="">
</div>
</body>
</html>
и стилевая разметка:
body * { font-family: Arial, Tahoma, Verdana; font-size: 14px; line-height: 14px; border: 1px solid #d0d0d0; outline: none; padding: 0; }
input[type=text] { width: 390px; height: 20px; margin: 0px 6px 12px 0px; }
#replaceImageButton { width: 100px; height: 20px; }
#imageContainer { position: relative; width: 500px; max-width: 500px; height: 500px; max-height: 500px; display: table-cell; text-align: center; vertical-align: middle; line-height: 1px; }
#preloaderText { position: absolute; width: 20%; height: 10%; left: 40%; top: 45%; background-color: #00ffff; border: 0; line-height: 28px; display: none; }
#replaceableImage { max-width: 500px; max-height: 500px; border: 0; display: none; }
Необходимо разобраться в приведенной стилевой разметке (обратите особое внимание на то, как центрируются вертикальные и горизонтальные изображения в блоке изображения (
id: imageContainer)), а также написать скрипт, реализующий следующий функционал:
- после указания в поле ввода (id: imageSourceInput) URL изображения и нажатии клавиши Enter или кнопки Загрузить указанное изображение загружается в блок изображения (id: imageContainer);
- перед тем, как изображение будет загружено, в блоке изображения (id: imageContainer) появляется прелоадер (id: preloaderText) – плашка с надписью Загрузка...;
- если изображение успешно загружено, прелоадер исчезает, если нет – надпись прелоадера меняется на Ошибка загрузки;
- двойной щелчок мышью на поле ввода (id: imageSourceInput) очищает его, а также блок изображения (id: imageContainer).
JS–скрипты (scripts.js):
window.onload = function()
{
function setLoadingDivAndText(width, height, left, top, text, setsource = true)
{
document.getElementById('preloaderText').style.width = width;
document.getElementById('preloaderText').style.height = height;
document.getElementById('preloaderText').style.left = left;
document.getElementById('preloaderText').style.top = top;
document.getElementById('preloaderText').innerHTML = text;
document.getElementById('preloaderText').style.display = 'block';
if(setsource) document.getElementById('replaceableImage').src = document.getElementById('imageSourceInput').value;
}
document.getElementById('imageSourceInput').ondblclick = function()
{
document.getElementById('imageSourceInput').value = '';
document.getElementById('preloaderText').style.display = 'none';
document.getElementById('replaceableImage').style.display = 'none';
};
document.getElementById('imageSourceInput').onkeypress = function(e)
{
if(e.keyCode == 13 && document.getElementById('imageSourceInput').value) setLoadingDivAndText('20%', '6%', '40%', '47%', 'Загрузка...');
};
document.getElementById('replaceImageButton').onclick = function()
{
if(document.getElementById('imageSourceInput').value) setLoadingDivAndText('20%', '6%', '40%', '47%', 'Загрузка...');
};
document.getElementById('replaceableImage').onload = function()
{
document.getElementById('preloaderText').style.display = 'none';
document.getElementById('replaceableImage').style.display = 'inline';
};
document.getElementById('replaceableImage').onerror = function() { setLoadingDivAndText('40%', '6%', '30%', '47%', 'Ошибка загрузки', false); };
};
Результат:
Результат выполнения задания можно посмотреть
здесь.