jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

beautify html

Browse source
This commit is contained in:
Ilya Kantor 2015-03-09 19:02:13 +03:00
parent ecf1478e7e
commit 5342f628da
354 changed files with 13965 additions and 9486 deletions
Download patch file Download diff file Expand all files Collapse all files

57
2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html
View file

@ -1,42 +1,49 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style> .img-replace { float: left; border: 1px solid black;} </style>
<style>
.img-replace {
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
<hr>
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="https://js.cx/search/google.png" class="img-replace">
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>
<button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
<hr>
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="https://js.cx/search/google.png" class="img-replace">
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>
<div style="width:101px;height:40px;font-size:32px" data-src="https://js.cx/search/yandex.png" class="img-replace">
<span style="color:#F00">Я</span>ндекс
</div>
<div style="width:101px;height:40px;font-size:32px" data-src="https://js.cx/search/yandex.png" class="img-replace">
<span style="color:#F00">Я</span>ндекс
</div>
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing:3px;font-family:Arial" data-src="bing.png" class="img-replace">bing</div>
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing:3px;font-family:Arial" data-src="bing.png" class="img-replace">bing</div>
<script>
<script>
function replaceImg() {
var divs = document.querySelectorAll('div.img-replace');
for (var i = 0; i < divs.length; i++)(function(i) {
var img = document.createElement('img');
img.src = divs[i].getAttribute('data-src');
img.className = 'img-replace';
function replaceImg() {
var divs = document.querySelectorAll('div.img-replace');
for(var i=0; i<divs.length; i++) (function(i) {
var img = document.createElement('img');
img.src = divs[i].getAttribute('data-src');
img.className = 'img-replace';
img.onload = function() {
divs[i].parentNode.replaceChild(img, divs[i]);
}
img.onload = function() {
divs[i].parentNode.replaceChild(img, divs[i]);
}(i))
}
}(i))
}
setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации
</script>
setTimeout(replaceImg, 1000); // задержка на 1 сек для демонстрации
</script>
</body>
</html>
</html>

42
2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html
View file

@ -1,32 +1,40 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style> .img-replace { float: left; border: 1px solid black;} </style>
<style>
.img-replace {
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- Google -->
<!-- Google -->
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" class="img-replace">
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>
<!-- Яндекс -->
<div style="width:101px;height:40px;font-size:32px" class="img-replace">
<span style="color:#F00">Я</span>ндекс
</div>
<!-- Яндекс -->
<div style="width:101px;height:40px;font-size:32px" class="img-replace">
<span style="color:#F00">Я</span>ндекс
</div>
<!-- Bing -->
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>
<!-- Bing -->
<div style="width:100;height:40px;font-size:32px;color:#006dd4;font-weight:bold;letter-spacing: 3px; font-family:Arial">bing</div>
<hr>
<!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
<hr>
<!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
<img src="https://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
<img src="https://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
<img src="https://js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="https://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
</body>
</html>
</html>

77
2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html
View file

@ -1,56 +1,57 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
<script>
function preloadImages(sources, callback) {
var counter = 0;
function preloadImages(sources, callback) {
var counter = 0;
function onLoad() {
counter++;
if (counter == sources.length) callback();
}
for (var i = 0; i < sources.length; i++) {
var img = document.createElement('img');
// сначала onload/onerror, затем src - важно для IE8-
img.onload = img.onerror = onLoad;
img.src = sources[i];
}
function onLoad() {
counter++;
if (counter == sources.length) callback();
}
// ---------- Проверка ----------
var sources = [
"https://js.cx/images-load/1.jpg",
"https://js.cx/images-load/2.jpg",
"https://js.cx/images-load/3.jpg"
];
for (var i = 0; i < sources.length; i++) {
var img = document.createElement('img');
// сначала onload/onerror, затем src - важно для IE8-
img.onload = img.onerror = onLoad;
img.src = sources[i];
sources[i] += '?' + Math.random();
}
}
// ---------- Проверка ----------
var sources = [
"https://js.cx/images-load/1.jpg",
"https://js.cx/images-load/2.jpg",
"https://js.cx/images-load/3.jpg"
];
for (var i=0; i<sources.length; i++) {
sources[i] += '?'+Math.random();
}
function testLoaded() {
var widthSum = 0;
for (var i = 0; i < sources.length; i++) {
var img = document.createElement('img');
img.src = sources[i];
widthSum += img.width;
function testLoaded() {
var widthSum = 0;
for (var i = 0; i < sources.length; i++) {
var img = document.createElement('img');
img.src = sources[i];
widthSum += img.width;
}
alert(widthSum); // 300!
}
alert(widthSum); // 300!
}
// до загрузки - 0
testLoaded();
// после загрузки - 300
preloadImages(sources, testLoaded);
</script>
// до загрузки - 0
testLoaded();
// после загрузки - 300
preloadImages(sources, testLoaded);
</script>
</body>
</html>
</html>

73
2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html
View file

@ -1,49 +1,50 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function preloadImages(sources, callback) {
/* ваш код */
}
// ---------- Проверка ----------
/* файлы для загрузки */
var sources = [
"https://js.cx/images-load/1.jpg",
"https://js.cx/images-load/2.jpg",
"https://js.cx/images-load/3.jpg"
];
for (var i=0; i<sources.length; i++) {
sources[i] += '?'+Math.random(); // добавляем параметр, чтобы без кеша (для теста)
}
/** если картинка загружена, то можно будет сразу получить её ширину
* создадим все картинки и проверим, есть ли у них ширина
*/
function testLoaded() {
var widthSum = 0;
for (var i = 0; i < sources.length; i++) {
var img = document.createElement('img');
img.src = sources[i];
widthSum += img.width;
<script>
function preloadImages(sources, callback) {
/* ваш код */
}
// каждое изображение 100x100, общая ширина должна быть 300px
alert(widthSum);
}
// до загрузки - выведет 0
testLoaded();
// ---------- Проверка ----------
// после загрузки - выведет 300
preloadImages(sources, testLoaded);
/* файлы для загрузки */
var sources = [
"https://js.cx/images-load/1.jpg",
"https://js.cx/images-load/2.jpg",
"https://js.cx/images-load/3.jpg"
];
for (var i = 0; i < sources.length; i++) {
sources[i] += '?' + Math.random(); // добавляем параметр, чтобы без кеша (для теста)
}
</script>
/** если картинка загружена, то можно будет сразу получить её ширину
* создадим все картинки и проверим, есть ли у них ширина
*/
function testLoaded() {
var widthSum = 0;
for (var i = 0; i < sources.length; i++) {
var img = document.createElement('img');
img.src = sources[i];
widthSum += img.width;
}
// каждое изображение 100x100, общая ширина должна быть 300px
alert(widthSum);
}
// до загрузки - выведет 0
testLoaded();
// после загрузки - выведет 300
preloadImages(sources, testLoaded);
</script>
</body>
</html>
</html>

55
2-ui/3-event-details/11-onload-onerror/3-script-callback/solution.view/index.html
View file

@ -1,41 +1,42 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
<script>
function addScript(src, callback) {
var script = document.createElement('script');
script.src = src;
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(script, s);
function addScript(src, callback) {
var script = document.createElement('script');
script.src = src;
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(script, s);
var loaded = false;
var loaded = false;
function onload() {
if (loaded) return; // повторный вызов
loaded = true;
callback();
}
script.onload = onload; // все браузеры, IE с версии 9
script.onreadystatechange = function() { // IE8-
if (this.readyState == 'loaded' || this.readyState == 'complete') {
setTimeout(onload, 0);
}
};
function onload() {
if (loaded) return; // повторный вызов
loaded = true;
callback();
}
script.onload = onload; // все браузеры, IE с версии 9
script.onreadystatechange = function () { // IE8-
if (this.readyState == 'loaded' || this.readyState == 'complete') {
setTimeout(onload, 0);
}
};
}
addScript("go.js", function() {
go();
});
</script>
addScript("go.js", function() {
go();
});
</script>
</body>
</html>
</html>

23
2-ui/3-event-details/11-onload-onerror/3-script-callback/source.view/index.html
View file

@ -1,21 +1,22 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
<script>
function addScript(src, callback) {
/* ваш код */
}
function addScript(src, callback) {
/* ваш код */
}
addScript("go.js", function() {
go();
});
</script>
addScript("go.js", function() {
go();
});
</script>
</body>
</html>
</html>

71
2-ui/3-event-details/11-onload-onerror/4-scripts-callback/solution.view/index.html
View file

@ -1,51 +1,54 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function addScript(src) {
var script = document.createElement('script');
script.src = src;
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(script, s);
return script;
}
function addScripts(scripts, callback) {
var loaded = {}; // Для загруженных файлов loaded[i] = true
var counter = 0;
function onload(i) {
if (loaded[i]) return; // лишний вызов onload/onreadystatechange
loaded[i] = true;
counter++;
if (counter == scripts.length) callback();
<script>
function addScript(src) {
var script = document.createElement('script');
script.src = src;
var s = document.getElementsByTagName('script')[0]
s.parentNode.insertBefore(script, s);
return script;
}
for (var i = 0; i < scripts.length; i++) (function(i) {
var script = addScript(scripts[i]);
function addScripts(scripts, callback) {
var loaded = {}; // Для загруженных файлов loaded[i] = true
var counter = 0;
script.onload = function() {
onload(i);
};
function onload(i) {
if (loaded[i]) return; // лишний вызов onload/onreadystatechange
loaded[i] = true;
counter++;
if (counter == scripts.length) callback();
}
script.onreadystatechange = function() { // IE8-
if (this.readyState == 'loaded' || this.readyState == 'complete') {
setTimeout(this.onload, 0); // возможны повторные вызовы onload
}
};
for (var i = 0; i < scripts.length; i++)(function(i) {
var script = addScript(scripts[i]);
}(i));
script.onload = function() {
onload(i);
};
}
script.onreadystatechange = function() { // IE8-
if (this.readyState == 'loaded' || this.readyState == 'complete') {
setTimeout(this.onload, 0); // возможны повторные вызовы onload
}
};
addScripts(["a.js", "b.js", "c.js"], function() { a() });
}(i));
</script>
}
addScripts(["a.js", "b.js", "c.js"], function() {
a()
});
</script>
</body>
</html>
</html>

19
2-ui/3-event-details/11-onload-onerror/4-scripts-callback/source.view/index.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
<script>
/* ваш код */
/* ваш код */
// функция a() сработает только если загружены a.js, b.js, c.js
addScripts(["a.js", "b.js", "c.js"], function() { a() });
</script>
// функция a() сработает только если загружены a.js, b.js, c.js
addScripts(["a.js", "b.js", "c.js"], function() {
a()
});
</script>
</body>
</html>
</html>