Reactjs - выбор пути к изображению для замены изображения с помощью jquery - PullRequest
Новая
       1

Reactjs - выбор пути к изображению для замены изображения с помощью jquery

0 голосов
/ 25 июня 2019

Я пытаюсь найти приложение из трех десятков, которое совместимо с реагировать. У всего, что я нашел, были проблемы с импортом.

Так что в этом случае - мне нужно создать заменитель изображения - который динамически изменяет элемент src при прокрутке. 

  var position = $(window).scrollTop();
  // should start at 0

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > position) {
      console.log('scrollDown');
      reel.next();
    } else {
      console.log('scrollUp');
      reel.prev();
    }
    position = scroll;
  });

поэтому при загрузке компонента --- мне удается отправить на страницу первый кадр для обработчика изображения. 

      {this.props.data.threesixty.length > 0 &&
        <img className={"threesixty " + imageOrientation + "-position"} src={require(`img/${this.props.data.threesixty}`)} data-count="61" />
      }

Я создал эту функцию - она ​​получает пути к изображениям, и она работает - но если вы прокручиваете слишком быстро, изображение не успевает визуализироваться ... 

    var reel = {
      init: function(el, startFrame, totalFrames, path){

          console.log("function time", el);

          this.el = el;
          this.totalFrames = totalFrames;
          this.frame = startFrame;
          this.path = path;
      },
      setImage: function(frame){

        if(frame < 10){
          frame = "0"+frame;
        }

        var pathx = 'S&N_360_mobile_01/S&N_360_ipad_01_00'+frame+'.png';

        // Require context image folder

        const images = require(`img/${pathx}`)
        //const images = requirecontext(pathx, true);
        console.log(images)

        $(this.el).attr("src", images)

      },
      next: function(){
        this.frame++;

        if(this.frame > this.totalFrames){
          this.frame = 1;
        }

        reel.setImage(this.frame);
        console.log("frame", this.frame);
      },  
      prev: function(){
        this.frame--;

        if(this.frame < 1){
          this.frame = this.totalFrames;
        }

        console.log("frame", this.frame);
        reel.setImage(this.frame);

      }
    }

    reel.init($('.threesixty'), 0, 40, 'S&N_360_mobile_01/S&N_360_ipad_01_####.png')
...