Как исправить последовательность изображений jQuery на Scroll

Question

Я пытаюсь реализовать функцию javascript, которая анимирует последовательность изображений при прокрутке.

Я пытаюсь создать анимацию с помощью скрипта по этой ссылке: https://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Image-Sequence-Animation-On-Scroll-Sequencer.html

Моя проблема в том, чтоэтому сценарию уже три года, и он не работает с jQuery 3.2.1.Но я должен использовать эту более новую версию jQuery.

Код скрипта выглядит следующим образом:

/**
 * jQuery-Sequencer
 * https://github.com/skruf/jQuery-sequencer
 *
 * Created by Thomas Låver
 * http://www.laaver.com
 *
 * Version: 2.0.0
 * Requires: jQuery 1.6+
 *
 */

(function($) {

  $.fn.sequencer = function(options, cb) {

    var self = this,
        paths = [],
        load = 0,
        sectionHeight,
        windowHeight,
        currentScroll,
        percentageScroll,
        index;

    if(options.path.substr(-1) === "/") {
      options.path = options.path.substr(0, options.path.length - 1)
    }

    for (var i = 0; i <= options.count; i++) {
      paths.push(options.path + "/" + i + "." + options.ext);
    }

    $("<div class='jquery-sequencer-preload'></div>").appendTo("body").css("display", "none");

    $(paths).each(function() {
      $("<img>").attr("src", this).load(function() {
        $(this).appendTo("div.jquery-sequencer-preload");
        load++;
        if (load === paths.length) {
          cb();
        }
      });
    });

    $(window).scroll(function() {
      sectionHeight = $(self).height();
      windowHeight = $(this).height();
      currentScroll = $(this).scrollTop();
      percentageScroll = 100 * currentScroll / (sectionHeight - windowHeight);
      index = Math.round(percentageScroll / 100 * options.count);
      if(index < options.count) {
        $("img.sequencer").attr("src", paths[index]);
      }
    });

    return this;

  };

}(jQuery));

Так что я уже изменил строку 37 с

$("<img>").attr("src", this).load(function() {

до

$("<img>").attr("src", this).on("load", function() {

С этим изменением все мои изображения загружаются, но я все еще получаю сообщение об ошибке: Uncaught TypeError: cb не является функцией

Что мне также нужно изменить, так что скрипт снова работает?

Спасибо за любой совет.

Answer 1

cb() - это функция обратного вызова, которая будет вызвана, как только загрузчик завершит выборку изображений.

Из примера, с которым вы связались, обратный вызов:

  function() {
    $("div#preload").hide();
  }

, что вполнепросто скрывает сообщение предварительного загрузчика.

В контексте, плагин инициализируется как:

  $("div#images").sequencer({
    count: 128,
    path: "./images",
    ext: "jpg"
  }, function() {
    $("div#preload").hide();
  });

Поскольку вы не указали, как вы вызываете эту функцию, я подозреваю, что вам не хватает этого обратного вызова функции.