Прокрутка локомотива не работает с Vue. js при необходимости загрузки изображений на страницу - PullRequest
Новая
       17

Прокрутка локомотива не работает с Vue. js при необходимости загрузки изображений на страницу

0 голосов
/ 27 мая 2020

Я пытаюсь реализовать Locomotive-Scroll. js, и у меня возникла проблема при загрузке изображений на мою страницу. Эффекты прокрутки работают без изображений, но прерываются при загрузке изображений. Я бы подумал, что смонтированная функция будет препятствовать загрузке эффекта прокрутки до тех пор, пока не будут загружены все элементы dom, поэтому я не уверен, откуда отсюда до go. Вот JS, с которым я работаю: 

<script>
import locomotiveScroll from "locomotive-scroll";
import $ from 'jquery'

export default {
  name: "locoScroll",
  props: {
    msg: String
  },
  data() {
    return {
      scrollIns: null,
  },
  mounted() {
    this.loadLanding();
    const _self = this;
    this.$nextTick(function() {
      _self.initLocoScroll(); 
    });
  },
  methods: {
    initLocoScroll() {
      const _self = this;
      this.scroll = new locomotiveScroll({
        el: _self.$refs['scrollSections'],
        smooth: true,
        smoothMobile: true,
        getDirection: true,
        initClass: true
      });
      this.scroll.update();
    },
      loadLanding: function () {
          //image & jobTitle fade in
          var elements = ['nav-links-top','rocks-image','job-title-container'];

          for (let i = 0; i < elements.length; i++) {
              var thisElement = $("." + elements[i]); //Get the current element based on class
              fadeInElement(thisElement, i);          //Call our "Fade in" function
          }
          function fadeInElement(elem, time) {      //Fade-in function that takes the element to fade-in, and the time it should wait
              setTimeout(function() {
                  elem.css('opacity', 1);
              }, 1650 * time + 500);                        //Set the time it should wait
          }
      },
  }
};

</script>
...