Как сделать подгрузку скрипта после загрузки страницы

@alanat · Регистрация: 16.07.2012

Студворк — интернет-сервис помощи студентам

Добрый день.

При загрузке страницы

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
 
<body>
 
<h1>Основной заголовок</h1>
<p>Основной текст</p>
<h2>Подзаголовок 1</h2>
<p>Еще текст 1</p>
<div class="gifbox"><script src="/js/gifbox.js" type="text/javascript"></script></div>
 
<h2>Подзаголовок 2</h2>
<p>Еще текст 2</p>
<div class="gifbox"><script src="/js/gifbox.js" type="text/javascript"></script></div>
 
</body>
</html>

подгружается скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var index = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
document.write('<img data-object-fit="cover" class="gifbox" src="/gifbox/gb%20(' + index + ').gif" alt="гифка">');
 
if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', function () {
        Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) {
            (image.runtimeStyle || image.style).background = 'url("' + image.src + '") no-repeat 50%/' + (image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
 
            image.src = 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'' + image.width + '\' height=\'' + image.height + '\'%3E%3C/svg%3E';
        });
    });
}

который выводит в случайном порядке гифки из папки /gifbox/

Как сделать так, чтобы JavaScript
1
<script src="/js/gifbox.js" type="text/javascript">
подгружался после загрузки страницы (чтобы ускорить загрузку страницы)?
Скорее всего что-то вроде body onload.

Заранее благодарен за помощь.

@fixeri · 03.02.2020, 16:49

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="gifbox"></div>
    <div class="gifbox"></div>
    <div class="gifbox"></div>
    
    <script type="text/javascript">
        "use strict";
        const gifbox = document.querySelector(".gifbox");
 
        window.onload = load.bind(null, gifbox);
 
        function load(item) {
            if (!item) return false;
            let randomIndex = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
            let image = document.createElement("img");
            image.setAttribute("src", "http://dummyimage.com/100x100/4d494d/686a82.gif&text=" + randomIndex);
            image.setAttribute("alt", "гифка");
            item.append(image);
            image.onload = () => {
                load(item.nextElementSibling && item.nextElementSibling.classList.contains("gifbox") ? item.nextElementSibling : false);
            };
        }
    </script>
</body>
</html>

@alanat · 03.02.2020, 22:09 **[ТС]**

Сообщение от fixeri

Если вместо

HTML5
1
2
3
    <div class="gifbox"></div>
    <div class="gifbox"></div>
    <div class="gifbox"></div>

записать

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="shtroborez-GNF-35-CA-pylesos-GAS-15-L">
<div class="gifbox"></div>
</div>
 
<div id="shtroborez-GNF-35-CA-pylesos-GAS-25">
<div class="gifbox"></div>
</div>
 
<div id="shtroborez-GNF-35-CA-pylesos-GAS-35-L-SFC">
<div class="gifbox"></div>
</div>
 
<div id="shtroborez-GNF-65-A-pylesos-GAS-25">
<div class="gifbox"></div>
</div>
 
<div id="shtroborez-GNF-65-A-pylesos-GAS-25-perforator-GBH-11-DE">
<div class="gifbox"></div>
</div>

то выводится только первое изображение.
Почему?
Как это исправить?

@fixeri · 03.02.2020, 22:23

тогда, сделаем лучше так

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    
    
    <script type="text/javascript">
        "use strict";
        const gifbox = document.querySelectorAll(".gifbox");
        let indexGifBox = 0;
        window.onload = load.bind(null, gifbox[indexGifBox]);
 
        function load(item) {
            if (!item) return false;
            let randomIndex = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
            let image = document.createElement("img");
            image.setAttribute("src", "http://dummyimage.com/100x100/4d494d/686a82.gif&text=" + randomIndex);
            image.setAttribute("alt", "гифка");
            item.append(image);
            image.onload = () => {
                load(gifbox[++indexGifBox]);
            };
        }
    </script>
</body>
</html>

@alanat · 03.02.2020, 22:29 **[ТС]**

Сообщение от fixeri

Да, работает.
Спасибо!

@alanat · 05.02.2020, 18:37 **[ТС]**

Сообщение от fixeri

тогда, сделаем лучше так

У меня есть скрипт, который при нажатии на кнопку подключает стили для мобильного меню:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                        window.onload = function(){
                                var open = false;
                                document.querySelector("#divmenu .btn").addEventListener("click",function(){
                                        if(open){
                                                document.querySelector("#s1cs2").classList.add("close");
                                                document.querySelector("#s1cs2").classList.remove("open");
                                                document.querySelector("#mbg").classList.add("close");
                                                document.querySelector("#mbg").classList.remove("open");
                                        }else{
                                               document.querySelector("#s1cs2").classList.add("open");
                                               document.querySelector("#s1cs2").classList.remove("close");
                                               document.querySelector("#mbg").classList.add("open");
                                               document.querySelector("#mbg").classList.remove("close");
                                        }
                                        open=!open;
                                });
                        }

и вот он не "дружит" с

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"use strict";
const gifbox = document.querySelectorAll(".gifbox");
let indexGifBox = 0;
window.onload = load.bind(null, gifbox[indexGifBox]);
 function load(item) {
if (!item) return false;
let randomIndex = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
let image = document.createElement("img");
image.setAttribute("src", "http://dummyimage.com/100x100/4d494d/686a82.gif&text=" + randomIndex);
image.setAttribute("alt", "гифка");
item.append(image);
image.onload = () => {
load(gifbox[++indexGifBox]);
};
}

Выполняется только последний скрипт.
Возможно всё дело в window.onload.

Как "помирить" скрипты?

@fixeri · 06.02.2020, 18:33

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
"use strict";
 
const gifbox = document.querySelectorAll(".gifbox");
let isOpen = false;
 
window.onload = function() {
    Array.from(gifbox).forEach(loadImage);
 
    document.querySelector("#divmenu .btn").addEventListener("click", function() {
        if(isOpen) {
            document.querySelector("#s1cs2").classList.add("close");
            document.querySelector("#s1cs2").classList.remove("open");
            document.querySelector("#mbg").classList.add("close");
            document.querySelector("#mbg").classList.remove("open");
        } else {
            document.querySelector("#s1cs2").classList.add("open");
            document.querySelector("#s1cs2").classList.remove("close");
            document.querySelector("#mbg").classList.add("open");
            document.querySelector("#mbg").classList.remove("close");
        }
        isOpen = !isOpen;
    });
};
 
function loadImage(item) {
    if (!item) return false;
    let randomIndex = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
    let image = document.createElement("img");
    image.setAttribute("src", "http://dummyimage.com/100x100/4d494d/686a82.gif&text=" + randomIndex);
    image.setAttribute("alt", "гифка");
    item.append(image);
    image.onerror = () => image.setAttribute("src", "http://dummyimage.com/100x100/4d494d/686a82.gif&text=ERROR");
}

@alanat · 09.02.2020, 23:04 **[ТС]**

Сообщение от fixeri

window.onload

По этой же схеме я сделал ещё изменения.
У меня было

HTML5
1
<div class="videotool" id="videotool1"><iframe width='512' height='288' src='https://www.youtube.com/embed/3zr3SX5axw0' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>

Потом я перенес код Youtube в скрипт

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="videotool" id="videotool1"></div>
<script>
"use strict";
 
const gifbox = document.querySelectorAll(".gifbox");
let isOpen = false;
 
window.onload = function() {
    videotool1.innerHTML = "<iframe width='512' height='288' src='https://www.youtube.com/embed/3zr3SX5axw0' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
    Array.from(gifbox).forEach(loadImage);
 
    document.querySelector("#divmenu .btn").addEventListener("click", function() {
        if(isOpen) {
            document.querySelector("#s1cs2").classList.add("close");
            document.querySelector("#s1cs2").classList.remove("open");
            document.querySelector("#mbg").classList.add("close");
            document.querySelector("#mbg").classList.remove("open");
        } else {
            document.querySelector("#s1cs2").classList.add("open");
            document.querySelector("#s1cs2").classList.remove("close");
            document.querySelector("#mbg").classList.add("open");
            document.querySelector("#mbg").classList.remove("close");
        }
        isOpen = !isOpen;
    });
};
 
function loadImage(item) {
    if (!item) return false;
    let randomIndex = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
    let image = document.createElement("img");
    image.setAttribute("src", "/gifbox/gb%20(" + randomIndex + ").gif");
    image.setAttribute("alt", "гифка");
    image.setAttribute("class", "gifbox");
    item.append(image);
    image.onerror = () => image.setAttribute("src", "/gifbox/gb%20(" + randomIndex + ").gif&text=ERROR");
}
</script>

И тем не менее видео с Youtube сильно затрудняет загрузку страницы.
Что я сделал не правильно?

@zasadadada · 10.02.2020, 14:50

"И тем не менее видео с Youtube сильно затрудняет загрузку страницы." - вставьте картинку, при нажатии на которую за место неё вставляется ютуб плеер

@fixeri · 10.02.2020, 18:05

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>
        <iframe id="videotool" width="512" height="288" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen" data-src="https://www.youtube.com/embed/3zr3SX5axw0"></iframe>
    </div>
 
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    <div class="wrapper">
        <div class="gifbox"></div>
    </div>
    
    <script>
    "use strict";
     
    window.onload = setTimeout.bind(window, ready, 0);
 
    function ready() {
        const gifbox = document.querySelectorAll(".gifbox");
        let isOpen = false;
        let videotool = document.getElementById("videotool");
 
        videotool.setAttribute("src", videotool.dataset[`src`]);    
        Array.from(gifbox).forEach(loadImage);
 
        document.querySelector("#divmenu .btn").addEventListener("click", function() {
            if(isOpen) {
                document.querySelector("#s1cs2").classList.add("close");
                document.querySelector("#s1cs2").classList.remove("open");
                document.querySelector("#mbg").classList.add("close");
                document.querySelector("#mbg").classList.remove("open");
            } else {
                document.querySelector("#s1cs2").classList.add("open");
                document.querySelector("#s1cs2").classList.remove("close");
                document.querySelector("#mbg").classList.add("open");
                document.querySelector("#mbg").classList.remove("close");
            }
            isOpen = !isOpen;
        });
    }
     
    function loadImage(item) {
        if (!item) return false;
        let randomIndex = Math.floor(Math.random() * (35 + 1 - 1)) + 1;
        let image = document.createElement("img");
        // image.setAttribute("src", "/gifbox/gb%20(" + randomIndex + ").gif");
        image.setAttribute("src", `http://dummyimage.com/200x200/4d494d/686a82.gif&text=${randomIndex}`);
        image.setAttribute("alt", "гифка");
        image.setAttribute("class", "gifbox");
        item.append(image);
        image.onerror = () => image.setAttribute("src", `http://dummyimage.com/200x200/4d494d/686a82.gif&text=ERROR`);
    }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

Как сделать подгрузку скрипта после загрузки страницы

Решение

Решение

Решение

@zasadadada 81 / 40 / 22 Регистрация: 03.05.2013 Сообщений: 722
	10.02.2020, 14:50
	"И тем не менее видео с Youtube сильно затрудняет загрузку страницы." - вставьте картинку, при нажатии на которую за место неё вставляется ютуб плеер 0