Javascript 当必须在页面上加载图像时，不使用Vue.js

我正在尝试实现motor-Scroll.js，在页面上加载图像时遇到问题。滚动效果在没有图像的情况下工作，但在加载图像时会中断。我认为mounted函数会阻止滚动效果加载，直到所有dom元素都加载完毕，所以我不确定接下来该怎么做。以下是我正在使用的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>

从“机车卷轴”导入机车卷轴；
从“jquery”导入$
导出默认值{
名称：“locoScroll”，
道具：{
msg:String
},
数据（）{
返回{
scrollIns:null，
},
安装的（）{
这是loadLanding（）；
const_self=这个；
此.$nextTick（函数（）{
_self.initLocoScroll（）；
});
},
方法：{
initLocoScroll（）{
const_self=这个；
this.scroll=新机车滚动({
el:_self.$refs[“滚动部分”]，
平滑：是的，
smoothMobile：没错，
是的，
initClass:true
});
this.scroll.update（）；
},
loadLanding:函数（）{
//图像和作业标题淡入
var元素=['nav-links-top'、'rocks-image'、'job-title-container']；
for（设i=0；i

也许这会有帮助。我在Nuxt中使用Vuejs，我遇到了类似的问题

加载dom后，您需要触发motor update（）

我使用graphql从api中提取数据，所以我有动态数据，在机车能够正确计算页面高度之前，我必须等待这些数据

Graphql apollo有一个方便的加载参数，该参数为true或false

我的解决方案是创建一个promse，检查是否使用该参数加载了数据，然后触发motor.update（）重新呈现页面高度

mounted() {
    this.pageLoad();
  },

方法：

pageLoad() {
      return new Promise((resolve, reject) => {
        console.log("loading...");
        setInterval(() => {
          if (!this.$apollo.queries.projects.loading) {
            resolve("data fetched");
          }
        }, 100);
      })
        .then((res) => {
          console.log("loaded!", res);
          this.filteredProjects = this.projects.nodes;
          this.$refs.scroller.locomotive.update();
          this.$refs.scroller.locomotive.scroll.reinitScrollBar();
          console.log("loco updated");
        })
        .catch((err) => {
          console.error("error: ", err);
        });
    },

一旦您有权访问机车实例，就可以告诉它进行更新

希望这在某种程度上有所帮助