打字机效果在手机上不起作用。使用引导程序 4

Question

我是一名初学者，主要停留在 Bootstrap 4 和 CSS 中。我现在正在冒险进入 JS，并且我创建了一个似乎无法修复的错误/怪物。

我想将打字机效果添加到我的主页。我让它在我的笔记本电脑上工作，我很想把它推送到 github，一切看起来都很棒，直到我试图在她的 iphone 上展示我的妻子，但它不起作用（Face Palm）。

我似乎无法确定为什么它不能在移动设备上运行。我尝试了一些检查，例如 pingdom 以查看网站是否太大而无法通过手机加载，但情况似乎并非如此。

如果有人可以看一下，我将不胜感激

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
  document.body.appendChild(css);
};

body {
  font-family: 'Roboto', sans-serif;
}

.navbar {
  font-size: 18px;
}

.navdrop {
  padding-top: 1em;
}

.navbar-nav>li {
  padding-left: 20px;
  padding-right: 20px;
}

.back1 {
  background-image: url(./assets/images/back1.png);
  background-size: cover;
  padding-bottom: 0%;
}

.back2 {
  background-image: url(./assets/images/back2.png);
  background-size: cover;
}

.hero {
  min-height: 100%;
  /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh;
  /* These two lines are counted as one :-)       */
  padding-right: 1em;
  padding-left: 1em;
  display: flex;
  align-items: center;
}

.heroText,
.heroButton,
.heroSubText {
  padding-top: .4em;
}

.howItWorks {
  padding-bottom: 3%;
}

#textColor {
  color: #102D47;
}

.heroIcon {
  color: #102D47;
  padding-top: 5em;
  vertical-align: middle;
}

.heroText {
  font-size: 50px;
  font-weight: 900;
  color: #102D47;
}

#heroText {
  font-size: 50px;
  font-weight: 900;
  color: #102D47;
}

.heroButton {
  background-color: #102D47;
  color: white;
}

.heroSubText {
  padding-top: 1em;
  padding-bottom: .5em;
  font-size: 25px;
  color: #102D47;
}

.howItWorks {
  background-image: url(./assets/images/debut_light.png);
  padding-right: 10%;
  padding-left: 10%;
}

.bottomhero {
  color: #102D47;
}

.heroFeatures {
  font-weight: 200;
  font-size: 20px;
  color: #102D47;
}

.subjectHeadRight,
.subjectHeadLeft {
  padding-top: 1.9em;
  font-size: 35px;
  font-weight: 900;
  color: #102D47;
}

.subjectHeadFooter {
  font-size: 25px;
  color: white;
}

.footerText {
  color: white;
}

.subjectHeadContact {
  padding-top: 1%;
  font-size: 25px;
  color: #102D47;
}

.videoSection {
  padding-top: 2em;
  padding-bottom: 2em;
}

.page-footer {
  background-color: #102D47;
}


/* Sign Up Form */

.leadSignUp {
  background: url(./assets/images/leadBackground.png)
}


/* Learn More Section */

.mainArea {
  background-color: #20812d;
}

.signUpBox {
  background-color: white;
  margin-top: 3%;
  margin-bottom: 3%;
  padding-bottom: 8%;
}

.signUpHead {
  font-size: 30px;
  font-weight: 800;
  padding-top: 4%;
}

.signUpSub {
  font-size: 20px;
  font-weight: 400;
  margin-top: -4%;
}

.teamPic {
  width: 40%;
  margin-left: 30%;
}

.peopleImg {
  border-radius: 40px;
  border: lightgray solid 1px;
}

@media only screen and (max-width: 767px) {
  .subjectHeadRight,
  .subjectHeadLeft,
  .howContentLeft,
  .howContentRight {
    text-align: center;
  }
  .howImg {
    padding-top: 0px;
    padding-bottom: 0px;
  }
  .subjectHeadRight,
  .subjectHeadLeft {
    padding-top: 0px;
    font-size: 22px;
  }
  .howContentLeft,
  .howContentRight {
    padding-left: 2%;
    padding-right: 2%;
  }
  .signup-box {
    padding-left: 10%;
    padding-right: 10%;
  }
}

@media only screen and (min-width: 1000px) {
  .heroText {
    font-size: 72px;
  }
}

.signup-box {
  padding-top: 3em;
  padding-bottom: 3em;
  background-image: url(./assets/images/leadBackground.png);
  background-size: cover;
}

.data-box {
  border: rgb(178, 178, 178) 2px solid;
  background-color: rgba(122, 122, 122, 0.388);
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100%;
}

.plumbTest {
  padding-top: 2em;
}

.plumbHead {
  font-weight: 900;
}

.signUp {
  font-size: 25px;
  font-weight: 900;
}

.textInfo {
  padding-left: 3em;
  padding-right: 3em;
}

.data-box {
  border-radius: 13px;
}

.submit {
  background-color: #102D47;
  width: 40%;
  border: lightsteelblue 3px solid;
}

* {
  color: #102D47;
  text-decoration: none;
}

<div class="container-flex hero back1 text-center" id="heroSpace">
  <div class="row">
    <div class="col-md-6 col-12">


      <h1 class="heroText">Better marketing for
        <p id="" class="typewrite" data-period="2000" data-type='[ "plumbers!", "electricians!", "landscapers!", "carpenters!", "painters!", "roofers!", "solar contractors!" ]'>
          <span class="wrap"></span>
        </p>
      </h1>

      <h2 class="heroSubText">
        Website Design, Lead Generation, Phone Handling!
      </h2>

      <div class="dropdown text-center heroDrop">
        <a class="btn dropdown-toggle heroButton" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Select Your Industry
                        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" id="textColor" href="./carpenter.html">Carpenters</a>
          <a class="dropdown-item" id="textColor" href="./electrical.html">Electrical</a>
          <a class="dropdown-item" id="textColor" href="./landscaping.html">Landscaping</a>
          <a class="dropdown-item" id="textColor" href="./painting.html">Painting</a>
          <a class="dropdown-item" id="textColor" href="plumbing.html">Plumbing</a>
          <a class="dropdown-item" id="textColor" href="./roofing.html">Roofing</a>
          <a class="dropdown-item" id="textColor" href="./solar.html">Solar</a>
          <a class="dropdown-item" id="textColor" href="./window-door.html"> Windows & Doors</a>
        </div>

        <p class='text-center heroLeads'>Get Free Leads!</p>
      </div>
    </div>




    <div class="col-md-6 col-12">
      <img class="img-fluid peopleImg shadow-lg" src="./assets/images/plumber-1.jpeg" alt="people working">
    </div>


  </div>



</div>

它。我会把代码放在这里和codepen上。

感谢您的帮助！

编解码器：https://codepen.io/rob-connolly/pen/oNLamEd

Answer 1

用户错误，我在英雄空间中将图像制作得非常大。它导致打字机效果加载缓慢。我已将 img 大小从 5000px 减小到 1000px，它加载速度更快，现在可以正常工作了。