Arhn - архитектура программирования

Загрузка изображения нарушает определенные сценарии (Fancybox, Waypoints)?

Я пытаюсь предварительно загрузить некоторые фоновые изображения, которые отлично работают. Но когда скрипт завершает работу и переходит на мой сайт, некоторые скрипты/плагины не работают... (Waypoints, Fancybox)

Но все остальные, такие как Skrollr, jPlayer и т. д., работают нормально.

Вот мой код...

        function preloadTrees() {

            var treesIndex = '0';

            var trees = $('.tree > span.preload');

            nextTree();

            function nextTree() {

                console.log('Tree (' + treesIndex + ') of (' + trees.length + ')');

                if (treesIndex == trees.length) {

                    alert('All Images Loaded (' + trees.length + ')');

                    preloadUI();

                }
                else {

                    var currentTree = trees[treesIndex++];

                    if (currentTree) {

                        var currentTreeObj = $(currentTree);
                        var month = currentTreeObj.data('month');

                        console.log('Loading Tree - ' + month);

                        var treeImage = new Image();

                        if (isiPad) {
                            var path = '../assets/images/sprite-trees-' + month + '@2x.png';
                        }
                        else {
                            var path = '../assets/images/sprite-trees-' + month + '.png';
                        }

                        treeImage.src = path;

                        treeImage.onload = function() {

                            $('span.' + month).each(
                                function(){
                                    $(this).css('background-image', 'url(' + path + ')');                                       
                                }
                            );

                            console.log('Image Loaded ' + path);

                            nextTree();

                        }

                    }
                }

            }

        }

Часть, которую я сузил, это:

treeImage.onload = function() {

Если я уберу это, весь сайт будет работать.

С чего бы это?

23.03.2013

  • Вы получаете какие-либо ошибки в консоли JS? Если да, то что они говорят? Вы получаете ошибки на каждой итерации nextTree() или только на определенных? 24.03.2013
  • @prodigitalson Никаких ошибок, что бы там ни было... 24.03.2013

Ответы:


1

Я вижу только две вещи...

Во-первых, я не вижу вашего предварительного загрузчика, завернутого в $(function(){ /* preloader here */})... Если вы этого не делаете, значит, вы пытаетесь использовать jquery для выбора вещей из DOM до того, как DOM будет готов.

Во-вторых, это может быть связано с тем, что вы назначаете обработчик событий напрямую через свойство onload. Вместо этого попробуйте добавить обработчик событий, например:

// vanilla JS - note youll need to make this crossbrowser
treeImage.addEventListener('onload', function(){});

// or via jquery
$(treeImage).load(function(){});
23.03.2013
  • Да, я не публиковал весь свой код, но он находится внутри '$(function(){ /* preloader here */})'. Добавляем его в '$(treeImage).load(function(){}) ;' все еще не работает... Я понятия не имею, почему это происходит, и это действительно раздражает... 24.03.2013
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..