Die Website wird im Safari-Browser nicht richtig geladen

Lesezeit: 2 Minuten

Benutzeravatar von ThemesCreator
ThemesCreator

Das ist meine Webseite: http://themescreators.com/seven-host/

Ich verwende einen benutzerdefinierten Ladeeffekt und aus irgendeinem Grund funktioniert er nicht gut.

Dies ist der Code, der für den Ladeeffekt verwendet wird:

HTML:

<div class="loadingContainer">
   <div class="loading">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
   </div>
</div>

CSS:

.loadingContainer {
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  z-index: 1000;
}
.loadingContainer .loading {
  display: inline-block;
  text-align: center;
}
.loadingContainer .loading > div {
  background-color: #21242e;
  height: 80px;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.loadingContainer .loading .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.loadingContainer .loading .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.loadingContainer .loading .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.loadingContainer .loading .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.loading i {
  width: 52px;
  height: 60px;
  position: absolute;
  left: 50%;
  margin-left: -21px;
  top: 50%;
  margin-top: -30px;
  font-size: 60px;
  display: inline-block;
}

JS:

  jQuery(window).load(function(){
    jQuery('.loadingContainer').css({'opacity' : 0 , 'display' : 'none'});
  });

In Safari wird der “.loadingContainer” nach dem Laden der Seite nicht entfernt, sodass Sie nur die gesamte Seite leer sehen. Kann mir jemand helfen, das zu beheben?

  • Ich kann das Problem nicht reproduzierenund dieser Code scheint sich nicht unter dem Link zu befinden.

    – Alexander O’Mara

    23. Mai 2015 um 23:19 Uhr

  • Können Sie mir bitte sagen, dass Sie Safari im Fenster verwenden?

    – Ritesh d joshi

    26. Mai 2015 um 13:28 Uhr

  • Hast du den Quick Time Player installiert?

    – Ritesh d joshi

    26. Mai 2015 um 13:31 Uhr

  • Ich kann es auch nicht reproduzieren. Es verhält sich in Safari genauso wie in Chrome und Firefox.

    – Cu3PO42

    30. Mai 2015 um 15:18 Uhr

Versuchen Sie zu ersetzen jQuery(window).load(function(){mit den folgenden

$(document).ready(function() {
    // Fadeout the screen when the page is fully loaded
    $('.loadingContainer').fadeOut();
});

Soweit ich weiß, ist es nicht erforderlich, jquery im Code anzugeben. In meinem Beispiel behandelt jquery automatisch die fadeOut() Handler. Der Rest des Codes kann vom Kern-Javascript übernommen werden. Ich verwende diesen Code auch auf meiner Website und er funktioniert auf jedem Betriebssystem (sogar Android) einwandfrei.

  • Tatsächlich verwendet WordPress standardmäßig jQuery im noConflict()-Modus. Wenn Sie also keine anonyme Funktion verwenden und das $ als jQuery-Alias ​​darin angeben, erhalten Sie einen Typfehler.

    – Daniel

    27. Mai 2015 um 23:22 Uhr

Ich kann dein Problem nicht reproduzieren. Vielleicht hast du den “loadingcontainer” von deiner Seite entfernt?

Um etwas über Ihren Code zu sagen, müssen Sie die “Stretchdelay” -Animation definieren.

@keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;}
}
@-webkit-keyframes stretchdelay {
    from {opacity: 0;}
    to {opacity: 1;} 
}

1389890cookie-checkDie Website wird im Safari-Browser nicht richtig geladen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy