Могу ли я выбрать локальную функцию, объявленную в $ (document) .ready () с jquery вне области?

Question

Как можно избежать копирования этой локальной $("load", handler) функции в каждый из моих gifshot.createGIF() сценариев и использовать ее как отдельный файл js для включения в индекс. php с элементом <script>.

$("load", function() {
    $(".loader").fadeOut("slow");
});

Я попытался переместить указанную выше функцию в новый скрипт loader1. js для ссылки на <script src="assets/js/loader1.js" type="text/javascript"></script> внутри индекса. php,

$(window).on("load", function() {
    $(".loader").fadeOut("slow");
});

Затем Я столкнулся с проблемой исчезновения .loader <div> после завершения загрузки содержимого DOM-страниц, но до того, как собственно окно загрузило все ресурсы (сценарии, изображения и т. Д. c).

У меня сложилось впечатление $(window).on("load", handler) запускается, когда все объекты DOM заканчивают загрузку, включая изображения и сценарии.

JS file1: (wintergifs. js)

$(document).ready(function() {
    gifshot.createGIF({
        gifWidth: 550,
        gifHeight: 500,
        images: [
            {src: '/hb-gifs/assets/images/winter0708.png'},
            {src: '/hb-gifs/assets/images/winter0809.png'},
            {src: '/hb-gifs/assets/images/winter0910.png'},
            {src: '/hb-gifs/assets/images/winter1011.png'},
            {src: '/hb-gifs/assets/images/winter1112.png'},
            {src: '/hb-gifs/assets/images/winter1213.png'},
            {src: '/hb-gifs/assets/images/winter1314.png'},
            {src: '/hb-gifs/assets/images/winter1415.png'},
            {src: '/hb-gifs/assets/images/winter1516.png'},
            {src: '/hb-gifs/assets/images/winter1617.png'},
            {src: '/hb-gifs/assets/images/winter1718.png'},
            {src: '/hb-gifs/assets/images/winter1819.png'},
        ],
        interval: 1.2,
        numFrames: 10,
        frameDuration: 1,
        sampleInterval: 10,
        numWorkers: 2
    }, function (obj) {
        if (!obj.error) {
            var image = obj.image;
            var animatedImage = document.createElement('img');
            animatedImage.src = image; 
            var image_att1 = document.createAttribute('class');
            image_att1.value = 'winter-gif';
            animatedImage.setAttributeNode(image_att1);
            document.body.appendChild(animatedImage);
            // alert("dom is ready winter gif");
            $(function() {
                var gif = $(".winter-gif").detach().clone();
                $(".section-one").html(gif);
                // alert("section-one loaded");
                console.log("winter total loss gif loaded");
            });
            // refactor to avoid repeating in each gif.js script
            $("load", function() {
                $(".loader").fadeOut("slow");
            });
        }
    });
});

CSS Фрагмент:

.loader {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    display: block;
    opacity: 0.95;
    background-color: gray;
    text-align: center;
    z-index: 99;
}
.ajax-loader {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 200px;
    z-index: 999;
}

JS file2: summergifs. js:

$(document).ready(function() {
    gifshot.createGIF({
        gifWidth: 550,
        gifHeight: 500,
        images: [
            {src: '/hb-gifs/assets/images/summer1011.png'},
            {src: '/hb-gifs/assets/images/summer1112.png'},
            {src: '/hb-gifs/assets/images/summer1213.png'},
            {src: '/hb-gifs/assets/images/summer1314.png'},
            {src: '/hb-gifs/assets/images/summer1415.png'},
            {src: '/hb-gifs/assets/images/summer1516.png'},
            {src: '/hb-gifs/assets/images/summer1617.png'},
            {src: '/hb-gifs/assets/images/summer1718.png'},
            {src: '/hb-gifs/assets/images/summer1819.png'},
        ],
        interval: 1.2,
        numFrames: 10,
        frameDuration: 1,
        sampleInterval: 10,
        numWorkers: 2
    }, function (obj) {
        if (!obj.error) {
            var image = obj.image;
            var animatedImage = document.createElement('img');
            animatedImage.src = image; 
            var image_att1 = document.createAttribute('class');
            image_att1.value = 'summer-gif';

            animatedImage.setAttributeNode(image_att1);

            document.body.appendChild(animatedImage);
            // alert("dom is ready summer gif");
            $(function() {
                var gif = $(".summer-gif").detach().clone();
                $(".section-two").html(gif);
                // alert("section-two loaded");
                console.log("summer total loss gif loaded");
            });
            $("load", function() {
                $(".loader").fadeOut("slow");
            });    
        }
    });
});

JS file3: all_loss. js

$(document).ready(function() {
    gifshot.createGIF({
        gifWidth: 550,
        gifHeight: 500,
        images: [
            {src: '/hb-gifs/assets/images/annual1011.png'},
            {src: '/hb-gifs/assets/images/annual1112.png'},
            {src: '/hb-gifs/assets/images/annual1213.png'},
            {src: '/hb-gifs/assets/images/annual1314.png'},
            {src: '/hb-gifs/assets/images/annual1415.png'},
            {src: '/hb-gifs/assets/images/annual1516.png'},
            {src: '/hb-gifs/assets/images/annual1617.png'},
            {src: '/hb-gifs/assets/images/annual1718.png'},
            {src: '/hb-gifs/assets/images/annual1819.png'},
        ],
        interval: 1.2,
        numFrames: 10,
        frameDuration: 1,
        sampleInterval: 10,
        numWorkers: 2
    }, function (obj) {
        if (!obj.error) {
            var image = obj.image;
            var animatedImage = document.createElement('img');
            animatedImage.src = image; 
            var image_att1 = document.createAttribute('class');
            image_att1.value = 'annual-gif';

            animatedImage.setAttributeNode(image_att1);
            document.body.appendChild(animatedImage);
            // alert("dom is ready annual gif");
            $(function() {
                var gif = $(".annual-gif").detach().clone();
                $(".section-three").html(gif);
                // alert("section-three loaded");
                console.log("annual total loss gif loaded");
            });

            $("load", function() {
                $(".loader").fadeOut("slow");
            });

        }
    });
});

Любая помощь или очень хотелось бы получить представление о том, как / если я могу преобразовать эти локальные функции в другой файл js!