Skrollr Image Flicker. Предварительная загрузка Firefox

Question

Im в процессе разработки анимации «flipbook-style» с использованием Skrollr путем запуска изменения фонового изображения, когда пользователь прокручивается до указанных позиций на странице. Проблема в том, что в браузере изменения изображения задерживаются, создавая то, что можно определить только как «мерцание» белого между кадрами.

<div class="section" style="background: url('frame1.png')" 
data-560-top="background-image:!url('frame1.png');" 
data-440-top="background-image:!url('frame2.png');"> 

HTML-код прост; он в основном утверждает, что на 560 пикселей от вершины div (по отношению к окну браузера) фон должен быть в кадре 1, а затем, когда пользователь прокручивается ближе к div (440 пикселей от вершины div), фоновое изображение меняется на кадр 2. Я планирую использовать до 20 кадров, а изображения довольно большие.

Я создал JSBin here, который включает в себя очень упрощенный образец с изображениями из placehold.it. Сюда входит скрипт Skrollr и пример макета раздела моего проекта. Главное отличие заключается в том, что изображения в моем проекте имеют гораздо больший масштаб.

(function($) { 
 
    var cache = []; 
 
    // Arguments are image paths relative to the current page. 
 
    $.preLoadImages = function() { 
 
    var args_len = arguments.length; 
 
    for (var i = args_len; i--;) { 
 
     var cacheImage = document.createElement('img'); 
 
     cacheImage.src = arguments[i]; 
 
     cache.push(cacheImage); 
 
    } 
 
    }; 
 
})(jQuery); 
 

 
jQuery.preLoadImages(
 
    'http://www.placehold.it/300x200.png', 
 
    'http://www.placehold.it/300x200.png' 
 
);

выше фрагмент кода, кажется, работает на Chrome, однако проблема мерцания остается в Firefox. На основе исследований firefox обрабатывает кешированные изображения по-разному от Chrome? (Например, если изображение не считается необходимым для firefox в данный момент времени, оно пропадает?)

Я хотел бы знать, как я могу заставить все браузеры предварительно загрузить изображения эффективно, чтобы избежать фонового изображения мерцания после изменения. Я по-прежнему новичок в Javascript/JQuery.

Надеюсь, я дал четкое объяснение. Вся помощь была оценена.

Dan

Answer 1

Вы можете предварительно загрузить изображения, используя только CSS, нет необходимости в JS. Отъезд this article для получения дополнительной информации. Еще один интересный способ сделать это - в разделе комментариев статьи. В основном вы назначаете фоновое изображение псевдоэлементу, так что он кэшируется и готов к использованию всякий раз. Смотрите этот код для примера:

#something:before { 
    content: url("./img.jpg"); 
    width:0; 
    height:0; 
    visibility:hidden; 
}