Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript > JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/25: Рейтинг темы: голосов - 25, средняя оценка - 4.60
12 / 12 / 1
Регистрация: 16.07.2012
Сообщений: 750
1

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

03.02.2020, 15:46. Показов 5184. Ответов 9
Метки body, onload, скрипт (Все метки)
Author24 — интернет-сервис помощи студентам
Добрый день.

При загрузке страницы
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.

Заранее благодарен за помощь.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 03.02.2020, 15:46
Ответы с готовыми решениями:

Выполнение скрипта сразу после загрузки страницы
Добрый день. Сложилась проблема. Есть Яваскрипт который так скажем делает текст резиновым, при...

Подгрузка php скрипта после загрузки страницы
Добрый день! У меня такая проблема: Есть php скрипт, который парсит данные с VK / БД, из за него...

Как сделать подгрузку страницы при её прокрутке
как реализовать такую фишку как на файсбуке, когда сразу сраничка загружается не вся стару, а...

как сделать подгрузку сообщений с сервера без перезагрузки страницы
собственно сабж есть табличка messages: id|author|poluchatel|date|text сообщения я загружаю на...

9
380 / 230 / 115
Регистрация: 22.11.2016
Сообщений: 379
03.02.2020, 16:49 2
Лучший ответ Сообщение было отмечено alanat как решение

Решение

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>
1
12 / 12 / 1
Регистрация: 16.07.2012
Сообщений: 750
03.02.2020, 22:09  [ТС] 3
Цитата Сообщение от fixeri Посмотреть сообщение
<div class="gifbox"></div>
<div class="gifbox"></div>
<div class="gifbox"></div>
Если вместо
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>
то выводится только первое изображение.
Почему?
Как это исправить?
0
380 / 230 / 115
Регистрация: 22.11.2016
Сообщений: 379
03.02.2020, 22:23 4
Лучший ответ Сообщение было отмечено alanat как решение

Решение

тогда, сделаем лучше так
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>
1
12 / 12 / 1
Регистрация: 16.07.2012
Сообщений: 750
03.02.2020, 22:29  [ТС] 5
Цитата Сообщение от fixeri Посмотреть сообщение
<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>
Да, работает.
Спасибо!
0
12 / 12 / 1
Регистрация: 16.07.2012
Сообщений: 750
05.02.2020, 18:37  [ТС] 6
Цитата Сообщение от 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.

Как "помирить" скрипты?
0
380 / 230 / 115
Регистрация: 22.11.2016
Сообщений: 379
06.02.2020, 18:33 7
Лучший ответ Сообщение было отмечено alanat как решение

Решение

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");
}
1
12 / 12 / 1
Регистрация: 16.07.2012
Сообщений: 750
09.02.2020, 23:04  [ТС] 8
Цитата Сообщение от 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 сильно затрудняет загрузку страницы.
Что я сделал не правильно?
0
81 / 40 / 22
Регистрация: 03.05.2013
Сообщений: 713
10.02.2020, 14:50 9
"И тем не менее видео с Youtube сильно затрудняет загрузку страницы." - вставьте картинку, при нажатии на которую за место неё вставляется ютуб плеер
0
380 / 230 / 115
Регистрация: 22.11.2016
Сообщений: 379
10.02.2020, 18:05 10
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>
0
10.02.2020, 18:05
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 10.02.2020, 18:05
Помогаю со студенческими работами здесь

как сделать подгрузку второстепенных частей asp страницы после загрузки основной части?
Хочется примерно такого же эффекта, как загружается реклама от Googlу на этом и других сайтах. Есть...

TChromium сделать действие после загрузки страницы
TChromium, нужно сделать действие после загрузки страницы, всё не как не получается. Прошу помочь,...

После обновления страницы на время съезжают картинки, после полной загрузки страницы все восстанавливается
Помогите разобраться.. не пойму, из-за чего съезжают картинки услуг в две колонки.. после полной...

Не получается сделать подгрузку без перезагрузки страницы. Ошибка: Fatal error: Call to undefined function
Всем привет. Ни как не получается разобраться. Всё пытаюсь сделать обновление блока без...

Загрузка скрипта/страницы, индикатор загрузки
Имеется php скрипт, который получает данные через api, но при этом загрузка страницы просто...

Как запустить php функцию после загрузки страницы?
Как запустить php скрипт, только после того как страница сайта загрузится полностью? Т.е. отложить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru