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

@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>

Новые блоги и статьи Все статьи Все блоги /
Генерация OpenQASM из кода Q# EggHead 10.07.2025 Летом 2024-го я начал эксперименты с библиотекой Q# Bridge, и знаете что? Она оказалась просто находкой для тех, кто работает на стыке разных квантовых экосистем. Основная фишка этой библиотеки -. . .	Изучаем новый шаблон ИИ-чата .NET AI Chat Web App stackOverflow 10.07.2025 В . NET появилось интересное обновление - новый шаблон ИИ-чата под названием . NET AI Chat Web App. Когда я впервые наткнулся на анонс этого шаблона, то сразу понял, что Microsoft наконец-то. . .	Результаты исследования от команды ARP (июль 2025 г.) Programma_Boinc 10.07.2025 Результаты исследования от команды ARP (июль 2025 г. ) Африканский проект по дождям (ARP) World Community Grid снова запущен! Мы рады поделиться обновленной информацией о нашем прогрессе с осени. . .	Angular vs Svelte - что лучше? Reangularity 09.07.2025 Сегодня рынок разделился на несколько четких категорий: тяжеловесы корпоративного уровня (Angular), гибкие универсалы (React), прогрессивные решения (Vue) и новая волна компилируемых фреймворков. . .	Code First и Database First в Entity Framework UnmanagedCoder 09.07.2025 Entity Framework дает нам свободу выбора, предлагая как Code First, так и Database First подходы. Но эта свобода порождает вечный вопрос — какой подход выбрать? Entity Framework — это. . .
Как использовать Bluetooth-модуль HC-05 с Arduino Wired 08.07.2025 Bluetooth - это технология, созданная чтобы заменить кабельные соединения. Обычно ее используют для связи небольших устройств: мобильных телефонов, ноутбуков, наушников и т. д. Работает она на частоте. . .	Руководство по структурам данных Python AI_Generated 08.07.2025 Я отчетливо помню свои первые серьезные проекты на Python - я писал код, он работал, заказчики были относительно довольны. Но однажды мой наставник, взглянув на мою реализацию поиска по огромному. . .	Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Programma_Boinc 08.07.2025 Тестирование энергоэффективности и скорости вычислений видеокарт в BOINC проектах Опубликовано: 07. 07. 2025 Рубрика: Uncategorized Автор: AlexA Статья размещается на сайте с разрешения. . .	Раскрываем внутренние механики Android с помощью контекста и манифеста mobDevWorks 07.07.2025 Каждый Android-разработчик сталкивается с Context и манифестом буквально в первый день работы. Но много ли мы задумываемся о том, что скрывается за этими обыденными элементами? Я, честно говоря,. . .	API на базе FastAPI с Python за пару минут AI_Generated 07.07.2025 FastAPI - это относительно молодой фреймворк для создания веб-API, который за короткое время заработал бешеную популярность в Python-сообществе. И не зря. Я помню, как впервые запустил приложение на. . .

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

Решение

Решение

Решение

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