Проблема с сайтом (Часть контента не загружается с первого раза)
436
24 мая 2017, 04:19
Здравствуйте! Делаю портфолио для FCC столкнулся с такой проблемой, когда я захожу на сайт с мобильного телефона часть контента не прогружается с первого раза, после обновления страницы контент загружается полностью, как это пофиксить и с чем может быть связано?
Я могу залить сайт на облако или же дать на него ссылку, если это не нарушит правил SO
Так же если Вас не затруднит подскажите мне как новичку что мне подучить, чему уделить большее внимание, ибо я сам вижу CSS код на 800 строк, мне кажется это не очень хорошо.
Прикрепляю всю разметку и JS скрипты
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tvarinsky Klondike</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scroll.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
<div class="header">
<div class="topmenu">
<div class="col-xs-offset-1">
<div class="deactivatemenu">
<i class="fa fa-times"></i>
<p class="mobiletext">Close</p>
<div class="col-xs-12">
<a href="#home" class="mobilemenu">Home</a>
<a href="#about" class="mobilemenu">About me</a>
<a href="#portfolio" class="mobilemenu">Portfolio</a>
<a href="#comments" class="mobilemenu">Comments</a>
</div>
</div>
<div class="activatemenu">
<i class="fa fa-bars"></i>
<p class="mobiletext">Menu</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-11">
<nav>
<div class="col-md-2 col-xs-12">
<p class="onheader">TVARINSKY</p>
</div>
<div class="col-md-8 col-xs-12">
<!--Adaptive Menu-->
<!--PC menu-->
<div id="menu">
<a href="#home" class="top bottomline">Home</a>
<a href="#about" class="top bottomline">About me</a>
<a href="#portfolio" class="top bottomline">Portfolio</a>
<a href="#comments" class="top bottomline">Comments</a>
</div>
<!--PC menu-->
</div>
<div class="col-md-2 col-xs-10">
<div class="icons">
<a href="#" target="_blank"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a>
<a href="#" target="_blank"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a>
</div>
</div>
</nav>
</div>
<div class="col-md-6 col-xs-5 col-md-offset-4" id="home">
<h1 class="main">TVARINSKY</h1>
</div>
<div class="col-md-4 col-xs-12 col-md-offset-4">
<h3 class="main">Front-end developer <br>UI/UX designer</h3>
</div>
<div class="arrow">
<div class="col-xs-12 col-md-1 col-md-offset-5">
<a href="#about"><i class="fa fa-long-arrow-up bottomarrow fa-flip-vertical fa-2x" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="content" id="about">
<div class="row">
<div class="col-xs-12 col-md-9 col-md-offset-4">
<div class="col-xs-12 col-md-2">
<p class="main">About me</p>
</div>
<div class="col-xs-12 col-md-1">
<div class="line"></div>
</div>
<div class="col-xs-12 col-md-2">
<p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p>
</div>
</div>
<div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3">
<div class="col-xs-4 col-md-3 col-md-offset-1">
<i class="fa fa-heart-o fa-3x" aria-hidden="true"></i>
<p class="onblock">My life</p>
</div>
<div class="root col-xs-4 col-md-3 col-md-offset-1">
<i class="fa fa-toggle-on fa-3x"></i>
<p class="onblock">It's worked</p>
</div>
<div class="root col-md-4 col-xs-4 col-md-3 col-md-offset-1">
<i class="fa fa-thumbs-o-up fa-3x" aria-hidden="true"></i>
<p class="onblock">Seems good</p>
</div>
<div class="horizontal"></div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-4">
<div class="col-xs-12 col-md-2">
<p class="main">Portfolio</p>
</div>
<div id="portfolio">
<div class="col-xs-12 col-md-1">
<div class="line"></div>
</div>
<div class="col-xs-12 col-md-2">
<p class="text">Are provided below<br> the works performed by me.<br> You can estimate them.</p>
</div>
</div>
</div>
<div class="movegallery">
<div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3">
<img src="img\portfolio\2.png" class="galleryphoto small" alt="">
<img src="img\portfolio\3.png" class="galleryphoto small" alt="">
<img src="img\portfolio\4.png" class="galleryphoto small" alt="">
<img src="img\portfolio\7.png" class="galleryphoto small" alt="">
<img src="img\portfolio\6.png" class="galleryphoto small" alt="">
<img src="img\portfolio\5.png" class="galleryphoto small" alt="">
<img src="img\portfolio\1.png" class="galleryphoto small" alt="">
<img src="img\portfolio\8.png" class="galleryphoto small" alt="">
</div>
</div>
<div class="col-xs-12 col-md-9 col-md-offset-4 margin2">
<div class="col-xs-12 col-md-2">
<div ID="comments"></div>
<p class="main pmargin">Testimonials</p>
</div>
<div class="col-xs-12 col-md-1">
<div class="line"></div>
</div>
<div class="col-xs-12 col-md-2">
<p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="horizontal2"></div>
<h4 class="comments">Comments (2)</h4>
<br><br>
<textarea name="comment" placeholder="Input message text..." maxlength="300" wrap="hard"></textarea>
<a href="#"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></a>
<!-- Первый комментарий -->
<p class="commentfont">Ekaterina</p>
<p class="date">2017.02.11 18:33</p>
<p class="comment">Excellent work, Ivan! I have executed everything even before the discussed terms,<br> I helped with the database, I imposed, the excellent adaptive web site!</p>
<!-- Первый комментарий -->
<!-- Второй комментарий -->
<p class="commentfont">Nikita</p>
<p class="date">2016.11.07 21:40</p>
<p class="comment">Ivan is an excellent expert, I have made everything quickly<br> and qualitatively. P.S. The functionality has been in addition realized
<BR>which was initially not discussed, but at the same time the performer has made <br>everything and didn't demand a payment top. I recommend!
</p>
<!-- Второй комментарий -->
<!-- Показать еще -->
<a href="#" class="vmore">View more</a>
<!-- Показать еще -->
<div class="horizontal2"></div>
</div>
</div>
<div class="footer">
<div class="col-xs-12 col-md-2">
<b><p class="onfooter cmargin">TVARINSKY</p></b>
<br><p class="copyright">© 2017 Tvarinsky dev.</p>
<br><p class="end">Greetings, Traveler!</p>
</div>
</div>
</div>
<div id="scrollup"><i class="fa toparrow fa-long-arrow-up" aria-hidden="true"></i></div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Raleway:200');
html,
body {
margin: 0;
padding: 0;
background: #fff;
overflow-x: hidden;
}
:active,
:hover,
:focus {
outline: 0;
outline-offset: 0;
}
h1, h2, h3, h4, p {
cursor: default;
}
::selection {
background: #f7f7f7;
}
::-moz-selection {
background: #f7f7f7;
}
.topmenu {
position: absolute;
width: 100%;
height: 9rem;
background: #000;
opacity: 0.7;
z-index: auto;
}
.onheader {
font-family: 'Roboto', sans-serif;
font-size: 2em;
color: #eee;
display: inline-block;
position: relative;
line-height: 1.5;
margin-top: 15%;
}
h3.main {
font-family: 'Roboto', sans-serif;
font-size: 2.250em;
color: #eee;
display: inline-block;
position: relative;
line-height: 1.5;
text-align: center;
right: 3%;
}
h1.main {
font-family: 'Oswald', sans-serif;
position: relative;
display: inline-block;
font-size: 5em;
color: #eee;
line-height: 0.5;
margin-top: 40%;
letter-spacing: -2px;
right: 1.5%;
}
.header {
background: url('../img/header.png');
-moz-background-size: 100%;
/* Firefox 3.6+ */
-webkit-background-size: 100%;
/* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%;
/* Opera 9.6+ */
background-size: 100%;
/* Современные браузеры */
background-repeat: no-repeat;
height: 100%;
}
.bottomarrow {
color: #eee;
position: relative;
left: 3.5%;
margin-top: 20%;
border: 1px solid #b1b1b1;
padding-left: 12px;
padding-right: 12px;
padding-top: 5px;
padding-bottom: 5px;
transition: 0.35s
}
.toparrow {
color: #404040;
position: relative;
left: 3.5%;
margin-top: 20%;
transition: 0.35s;
font-size: 1.5em;
}
.bottomarrow:hover {
color: #d1d1d1;
border: 1px solid #249cce;
position: relative;
transition: 0.35s;
}
p.main {
font-family: 'Raleway', sans-serif;
font-size: 3.000em;
color: #404040;
letter-spacing: -2px;
display: inline-block;
position: relative;
}
.line {
width: 1px;
background-color: #626060;
height: 75px;
display: inline-block;
position: relative;
margin-bottom: 3%;
}
p.text {
font-family: 'Raleway', sans-serif;
font-size: 1.125em;
color: #404040;
display: inline-block;
position: relative;
text-align: center;
}
.pmargin {
right: 15%;
}
.fa-heart-o {
border: 5px solid #242424;
padding: 10px;
border-radius: 40px;
border-width: thin;
margin-top: 70px;
transition: 0.25s;
}
.fa-heart-o:hover {
color: #249cce;
transition: 0.25s;
border: 1px solid #249cce;
}
.fa-toggle-on {
border: 5px solid #292929;
padding: 10px;
padding-left: 7px;
border-radius: 40px;
border-width: thin;
margin-top: 70px;
transition: 0.25s;
}
.fa-toggle-on:hover {
color: #249cce;
transition: 0.25s;
border: 1px solid #249cce;
}
.fa-thumbs-o-up {
border: 5px solid #292929;
padding: 10px;
padding-left: 15px;
border-radius: 40px;
border-width: thin;
margin-top: 70px;
text-align: center;
transition: 0.25s;
}
.fa-thumbs-o-up:hover {
color: #249cce;
transition: 0.25s;
border: 1px solid #249cce;
}
p.onblock {
font-family: 'Raleway', sans-serif;
font-size: 1.313em;
color: #404040;
display: block;
position: relative;
text-align: left;
}
.horizontal {
width: 100%;
background-color: #6a6a6a;
height: 1px;
display: inline-block;
position: relative;
left: 5%;
margin-bottom: 10%;
margin-top: 2%;
}
.horizontal2 {
width: 100%;
background-color: #6a6a6a;
height: 1px;
display: inline-block;
position: relative;
margin-bottom: 2%;
margin-top: 2%;
}
.galleryphoto:hover {
-webkit-filter: grayscale(0%) blur(0px);
transition: 0.35s;
}
.galleryphoto {
position: relative;
-webkit-filter: grayscale(100%) blur(2px);
transition: 0.35s;
border: 1px solid #404040;
margin-top: 15%;
}
.small {
width: 14rem;
height: 25rem;
margin: 15px;
}
.medium {
width: 14rem;
height: 25rem;
margin: 15px;
}
.big {
width: 30rem;
height: 40rem;
margin: 15px;
}
.movegallery {
margin-left: 2.5%;
padding-top: 25%;
}
.margin {
position: relative;
margin-top: 25%;
}
.margin2 {
position: relative;
margin-top: 5.5%;
}
h4.comments {
font-family: 'Oswald', sans-serif;
font-size: 1.625em;
color: #676666;
display: inline-block;
position: relative;
border-bottom: 1px solid #676666;
padding-bottom: 5px;
left: 3%;
}
.fa-smile-o {
position: relative;
border: 1px solid #dddddd;
padding: 12px;
border-radius: 5px;
bottom: 17px;
color: #b1b1b1;
transition: 0.35s;
left: 3%;
}
.fa-smile-o:hover {
color: #249cce;
transition: 0.35s;
}
.fa-paper-plane {
position: relative;
border: 1px solid #dddddd;
padding: 12px;
border-radius: 5px;
bottom: 17px;
color: #b1b1b1;
transition: 0.35s;
left: 3%;
}
.fa-paper-plane:hover {
color: #249cce;
transition: 0.35s;
}
textarea {
padding: 12px;
position: relative;
left: 3%;
width: 80%;
height: 53px;
resize: none;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 14px;
color: #888585;
font-family: 'TimesNewRoman', sans-serif;
transition: 0.25s;
overflow: hidden;
}
textarea:focus {
border: 1px solid #ececec;
color: #404040;
transition: 0.25s;
height: 83px;
}
.commentfont {
position: relative;
color: #249cce;
font-size: 1.575em;
font-family: 'Oswald', sans-serif;
display: inline-block;
left: 5%;
margin-top: 2%;
}
.date {
position: relative;
color: #a4a4a4;
font-size: 1.005em;
font-family: 'Oswald', sans-serif;
display: inline-block;
left: 6%;
margin-top: 2%;
}
.comment {
position: relative;
color: #676666;
font-size: 1.000em;
font-family: 'TimesNewRoman', sans-serif;
display: block;
left: 5%;
}
.vmore {
border: 1px solid #575757;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
margin-top: 5%;
left: 40%;
position: relative;
color: #575757;
font-size: 1.250em;
font-family: 'Oswald', sans-serif;
display: inline-block;
transition: 0.35s;
}
.vmore:hover {
text-decoration: none;
border: 1px solid #249cce;
transition: 0.35s;
color: #249cce;
}
.main2 {
font-family: 'Raleway', sans-serif;
font-size: 3.000em;
color: #404040;
letter-spacing: -1px;
display: inline-block;
position: relative;
margin-top: 7%;
left: 4%;
}
.iconmargin {
margin-top: 20%;
padding-left: 5%;
}
.topvk {
color: #e1e1e1 !important;
display: inline-block;
position: relative;
left: 5%;
opacity: 0.6;
transition: 0.35s;
margin-left: 1.5%;
font-size: 1.650em;
}
.topvk:hover{
transition: 0.35s;
opacity: 1;
}
.vk {
display: inline-block;
position: relative;
color: #404040;
transition: 0.35s;
font-size: 2.375em;
opacity: 0.6;
}
.fa-vk:hover {
transition: 0.35s;
opacity: 1;
}
.facebook {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.fa-facebook:hover {
transition: 0.35s;
opacity: 1;
}
.twitter {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.fa-twitter:hover {
transition: 0.35s;
opacity: 1;
}
.github {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.fa-github:hover {
transition: 0.35s;
opacity: 1;
}
.envelope {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
opacity: 0.6;
}
.envelope:hover {
transition: 0.35s;
opacity: 1;
}
.footer {
margin-top: 7%;
background: #323232;
width: 100%;
height: 150px;
}
.onfooter {
position: relative;
color: #b4b4b4;
font-size: 2em;
font-family: 'roboto', sans-serif;
display: inline-block;
left: 20%;
text-decoration: none !important;
margin-top: 20%;
transition: 0.35s;
}
.copyright {
position: relative;
color: #b4b4b4;
font-size: 1.1em;
font-family: 'Oswald', sans-serif;
display: inline-block;
left: 25%;
text-decoration: none !important;
transition: 0.35s;
}
.cmargin {
margin-top: 10%;
}
.onfooter:hover{
transition: 0.35s;
color: #249cce;
}
.end {
font-family: 'Georgia', sans-serif;
position: relative;
color: #b4b4b4;
font-size: 0.9em;
display: block;
left: 32%;
text-decoration: none !important;
transition: 0.35s;
}
a.top {
list-style-type: none;
display: inline-block;
margin-left: 6%;
margin-top: 4%;
color: #e6e6e6;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
transition: 0.35s;
text-decoration: none;
}
.mobiletext {
display: inline-block;
color: #e6e6e6;
font-size: 1.5em;
font-family: 'Oswald', sans-serif;
transition: 0.35s;
text-decoration: none;
position: relative;
}
.mobilemenu {
display: block;
color: #e6e6e6 !important;
font-size: 2em;
font-family: 'roboto', sans-serif;
transition: 0.35s;
text-decoration: none !important;
position: relative;
border: 1px solid #404040;
padding-right: 20%;
padding-left: 20%;
text-align: center;
}
.bottomline {
position: relative;
color: #ff3296;
cursor: pointer;
}
.bottomline:after {
display: block;
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background-color: #249cce;
content: "";
transition: width 0.2s;
}
.bottomline:hover {
color: #fff;
}
.bottomline:hover:after {
width: 100%;
}
.fa-bars {
text-decoration: none;
color: #e6e6e6;
position: relative;
}
.fa-times {
text-decoration: none;
color: #e6e6e6;
position: relative;
}
.menubg {
visibility: hidden;
height: 100%;
width: 100%;
background: #404040;
}
.deactivatemenu {
display: none;
}
.activatemenu {
display: inline;
}
#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0; /* прозрачность */
padding: 5px 15px 10px; /* отступы */
background: none;
border: 1px solid #b1b1b1;
border-radius: 40px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
right: 15%; /* отступ слева */
bottom: 5%; /* отступ снизу */
display: none; /* спрятать блок */
cursor: pointer;
}
/* ПК */
@media (min-width: 1200px) {
.fa-bars, .mobiletext {
display: none;
}
}
/* Планшеты */
@media (min-width: 768px) and (max-width: 979px) {
a.top, .bottomline, .onheader {
display: none;
}
a.top {
display: block;
}
.line {
display: inline;
}
nav {
display: none;
}
.topmenu, .mobiletext, .icons {
display: none;
}
}
/* Телефоны и планшеты */
@media (max-width: 767px) and (min-width: 500px) {
a.top, .bottomline, .onheader, .icons {
display: none;
}
h1.main {margin-left:15%;}
.header {
-moz-background-size: 400%;
/* Firefox 3.6+ */
-webkit-background-size: 400%;
/* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 400%;
/* Opera 9.6+ */
background-size: 400%;
/* Современные браузеры */
height: 100%;}
.pmargin {
right: 0%;
}
.line {
display: none;
}
a.top{
margin-top: 15px;
}
.fa-heart-o, .fa-toggle-on .fa-thumbs-o-up {
font-size: 2em;
}
}
/* Маленькие телефоны */
@media (max-width: 480px) {
a.top, .bottomline, .onheader, .icons {
display: none;
}
h1.main {
margin-left:5%;
margin-top: 60%;
font-size: 3em;
text-align: left;
}
h3.main {
font-size: 1.5em;
margin-left:5%;
text-align: left;
}
.header {
-moz-background-size: 175%;
/* Firefox 3.6+ */
-webkit-background-size: 175%;
/* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 175%;
/* Opera 9.6+ */
background-size: 175%;
/* Современные браузеры */
height: 40%;}
.line {
display: none;
}
.vmore {
left: 32.5%;
}
.topmenu {
height: 3rem;
opacity: 1;
}
.fa-bars {
font-size: 1.5em;
z-index: 5;
}
.fa-times {
font-size: 1.5em;
z-index: 5;
}
.bottomarrow{
display: none;
}
.iconmargin {
margin-left: 8%;
}
.pmargin {
right: 0%;
}
.onheader {
background: #303030;
border-radius: 2px;
padding-right: 10px;
padding-left: 10px;
}
p.main {
margin-top: 5%;
font-size: 2.250em;
margin-left: 5%;
}
p.text {
margin-left: 10%;
text-align: left;
}
.fa-heart-o, .fa-toggle-on, .fa-thumbs-o-up {
font-size: 2em;
}
.horizontal {
left: 0%;
}
.comment {
max-width: 28rem;
}
textarea {
width: 60%;
}
#scrollup {
position: fixed; /* фиксированная позиция */
opacity: 0; /* прозрачность */
padding: 5px 15px 10px; /* отступы */
background: none;
border: 1px solid #b1b1b1;
border-radius: 40px; /* скругление углов */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
right: 10%; /* отступ слева */
bottom: 5%; /* отступ снизу */
cursor: pointer;
}
.root{
text-align:center;
}
.root p{
text-align:center;
}
MENU JS:
$(document).ready(function() {
$('.activatemenu').click(function(){
$('.deactivatemenu').css("position", "absolute");
$('.topmenu').animate({ height: "200%"}, 500);
$('.deactivatemenu').animate({ top: "5%"}, 500);
$('.activatemenu').fadeOut(250);
$('.deactivatemenu').fadeIn(1000);
$("html,body").css("overflow", "hidden");
$('.deactivatemenu').css("z-index", "5");
$('.activatemenu').css("z-index", "5");
$('.topmenu').css("z-index", "5");
});
$('.deactivatemenu').click(function(){
$('.topmenu').animate({ height: "3rem"}, 500);
$('.activatemenu').fadeIn(1000);
$('.deactivatemenu').fadeOut(250);
$("html,body").css("overflow","auto");
$("html,body").css("overflow-x","hidden");
$('.deactivatemenu').css("z-index", "5");
$('.activatemenu').css("z-index", "5");
$('.topmenu').css("z-index", "5");
});
});
Scroll JS:
$(document).ready(function(){
$("#menu").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
$(document).ready(function(){
$(".deactivatemenu").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
$(document).ready(function(){
$(".arrow").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 1500);
});
});
window.onload = function() {
var scrollUp = document.getElementById('scrollup');
scrollUp.onmouseover = function() {
scrollUp.style.opacity= 0.8;
scrollUp.style.filter = 'alpha(opacity=30)';
};
scrollUp.onmouseout = function() {
scrollUp.style.opacity = 1;
scrollUp.style.filter = 'alpha(opacity=50)';
};
scrollUp.onclick = function() {
$('html, body').animate({scrollTop:0}, 1500);
};
window.onscroll = function () {
if ( window.pageYOffset >= 200 ) {
$(scrollup).stop().animate({opacity:'1.0'},100);
scrollup.style.display = 'block';
} else {
$(scrollup).stop().animate({opacity:'0.0'},100);
scrollup.style.display = 'none';
}
};
};
Answer 1
Что-то мне подсказывает что у вас две вещи: слабый мобильный интернет/девайс и картинки весят овер дофига. В коде у вас картинки портфолио грузятся сразу крупные да ещё в формате png. По старым негласным правилам веба страница должна всё-про всё весить до 2мб. С несжатыми картинками в png, подгрузкой иконочных шрифтов и нескольких гуглшрифтов (что тоже не камильфо: используйте 1-2 сеймейство шрифтов).
Я вам советую:
1) Непрозрачные картинки сохранять в *.jpg со сжатием (lossy or lossless https://kraken.io/) и в мелкой плитке галереи грузить только реально небольшие картинки до 600px размером, а вот уже при клике на них грузить оригинал во всплывашке.
2) Если вы используете только пару иконок на сайте, необязательно грузить весь шрифт. Вы можете сделать свой шрифт из нескольких иконок или сохранить иконки в *.svg и применять как обычные картинки.
3) Не используйте большое количество гугловских гарнитур, на сайте fonts.google.com вы можете из всего семейства выбрать только нужные вам, например light, regular, bold и подключить только их, гугл сам вам сгенерирует необходимый код для вставки нужных шрифтов. Шрифты тоже достаточно ёмкие по памяти.
4) Минификация и/или сборка css, js-файлов. Честно говоря, отдачи от неё совсем мало, сэкономить можно пару килобайт максимум. Неэффективна.
5)Важный пункт! Подключайте скрипты внизу HTML-файла, так как иначе они начинают грузиться до вашего сайта и портфолио в нем!
6) Последнее: много читал про то, что CDN-ки со шрифтами и js-библиотеками ускорят загрузку сайта (а вы так подключаете шрифты с гугла). Не правда! Кучу раз сайты подвисали дожидаясь ответа с этих сервисов, google fonts в том числе. Очевидно, серваки гугла не всегда отвечают быстро в наши страны.
Используйте для тестирования сервисы типа такого: https://developers.google.com/speed/pagespeed/insights/?hl=ru Они вам подробно распишут, почему сайт работает медленно.
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46730 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30301 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22879 visits
- Как через css изменить цвет png изображения? 10172 visits
- Blob video url download 9805 visits
- Php curl запрос через прокси с авторизацией 9064 visits
- Работа с captcha vk api 7981 visits
© "hostciti.net" 02.5.2024 | 22:50