Question

我正在尝试找到可与reactjs兼容的Threesixty应用程序。我发现的所有商品都有进口问题。

因此，在这种情况下-我需要创建一个图像替换器-在滚动时动态更改元素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')

React.js-通过jQuery获取图像路径以替换图像

0 个答案: