Как использовать внешний скрипт при подгрузке с помощью $.ajax?

Question

[Иван Иванов]

Есть такой код

<script>
    $(function() {
        var request = $.ajax({
            type: "GET",
            url: "/ajax/photo/get_photos",
            data: { id: 1},
            cache: false,
            dataType: "html",
        });

        request.done(function( msg ) {
            $( "#user_photos" ).html( msg );
        });

    });

</script>

В ответе от /ajax/photo/get_photos приходит, помимо html

<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/lightgallery.umd.js"></script>
<script>
    $(function() {
        lightGallery(document.getElementById('animated-thumbnails-gallery'), {
            thumbnail: true,
            closeOnTap: true,
            //enableSwipe: false,
            mobileSettings: {controls: true, showCloseIcon: true, download: true,},
        });
    });
</script>

При этом возникает ошибка caught ReferenceError: lightGallery is not defined
Если подгружать lightgallery.umd.js на странице запроса $.ajax путем вставки

<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/lightgallery.umd.js"></script>

на страницу, то все работает нормально, без ошибок. Можно ли как-то подгружать его в html в ответе /ajax/photo/get_photos , чтобы всё отрабатывало нормально и не было ошибки?

Answer 1

[zkrvndm]

Вы в принципе не должны так делать, такого рода скрипты подключатся единожды, а не по новой каждый раз.

<script>
	
	$(async function() {
		
		if (!window.lightGallery) {
			
			await $.getScript('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/lightgallery.umd.js');
			
		}
		
		var response = await $.ajax({
			type: 'GET',
			url: '/ajax/photo/get_photos',
			data: { id: 1},
			cache: false,
			dataType: 'html'
		});
		
		response = '<script>' + response.replace(/^.*\<script\>/gs, '');
		
		$( "#user_photos" ).html(response);
		
		console.log(response);
		
	});
	
</script>

Comments

[Иван Иванов]

Дела в том, что на странице /ajax/photo/get_photos может вовсе не быть фото, и тогда скрипт lightgallery.umd.js не подключается вообще. /ajax/photo/get_photos решает, подключать или нет скрипт lightgallery.umd.js

[zkrvndm]

Иван Иванов, а в чем проблема проверить сначала ответ, есть там скрипт или нет, если есть подключить и только потом вставлять фото? Но вообще странно, когда браузер видит скрипт он должен дождаться его загрузки, выполнить его и только потом перейти к выполнению следующих скриптов. Можете дать ссылку на страницу с демо?

[Иван Иванов]

zkrvndm, https://poiski.pro/adv_search

[zkrvndm]

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

$(function() {

        console.log(123);

        var s = document.createElement("script");
        s.type = "text/javascript";
        s.src = "https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/lightgallery.umd.js";
        
        s.onload = function() {
            
            lightGallery(document.getElementById('animated-thumbnails-gallery'), {
                thumbnail: true,
                closeOnTap: true,
                //enableSwipe: false,
                mobileSettings: {controls: true, showCloseIcon: true, download: true,},
            });
            
        }
            
        $("head").append(s);
        
    });

[Иван Иванов]

zkrvndm, Сделал на той же странице, onload не работает, в консоль ничего не выводится:

s.onload = function() {
            console.log('Onload');
            lightGallery(document.getElementById('animated-thumbnails-gallery'), {
                thumbnail: true,
                closeOnTap: true,
                //enableSwipe: false,
                mobileSettings: {controls: true, showCloseIcon: true, download: true,},
            });
        }

[zkrvndm]

Иван Иванов, лучше использовать встроенные в jQuery методы раз вы используете эту библиотеку:

$(function() {
	
	console.log('Загрузка скрипта...');
	
	var defer = $.getScript('https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.3/lightgallery.umd.js');
	
	defer.done(function() {
		
		lightGallery(document.getElementById('animated-thumbnails-gallery'), {
			thumbnail: true,
			closeOnTap: true,
			//enableSwipe: false,
			mobileSettings: {controls: true, showCloseIcon: true, download: true}
		});
		
		console.log('Скрипт загружен и lightGallery запущен');
		
	})
	
	defer.fail(function(err) {
		
		console.error('Не удалось загрузить скрипт', err);
		
	});
	
});

[Иван Иванов]

zkrvndm, Да, так получилось, спасибо.