[英]Website page takes a while to load images
所以我的网站上有一个页面有一个图像滑块,但我加载的图像的分辨率是 4032x3024,这需要一段时间。 它们是 JPEG 图像。 我仍然想显示图像的完整分辨率。 有没有办法可以先加载较低分辨率的版本,然后当好图像完全加载时,我只需交换它们。
这是我的代码:
<?php
//Set total images for each albums
$imagesTotalPC = 10;
?>
<html>
<head>
<meta charset="utf-8">
<title>Louka Papineau - Site Personnel</title>
<link type="text/css" rel="stylesheet" href="../css/styles.css">
</head>
<body>
<div id="particles-js"></div>
<script type="text/javascript" src="../js/particles.js"></script>
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<div class="outer-container">
<br>
<ul>
<li><a href="../default.html">Acceuil</a></li>
<li><a href="../personnelle.html">Information sur ta personne</a></li>
<li><a href="../talents.html">Talents</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Intérêts</a>
<div class="dropdown-content">
<a href="../interets/sports.html">Sportifs</a>
<a href="../interets/professionnels.html">Avenir Professionnels</a>
<a href="../interets/passe_temps.html">Passe-Temps</a>
<a href="../interets/voyage.html">Voyages</a>
</div>
</li>
<li><a href="../photos.html" class="activeNav">Album photos</a></li>
<li><a href="but.php">But du site web</a></li>
<li><a href="https://www.forums.loukapapineau.ca/mybb" target="_blank">Forum</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<div class="your-content" style="padding: 5px 10px;">
<div class="galleryContainer">
<div class="galleryThumbnailsContainer">
<div class="galleryThumbnails">
<?php
for ($t = 1; $t <= $imagesTotalPC; $t++) {
echo '<a href="javascript: changeimage(' . $t . ')" class="thumbnailsimage' . $t . '"><img src="../images/thumbPC/image' . $t . '.jpg" width="auto" height="100" alt="" /></a>';
}
?>
</div>
</div>
<div class="galleryPreviewContainer">
<div class="galleryPreviewImage">
<?php
for ($i = 1; $i <= $imagesTotalPC; $i++) {
echo '<img class="previewImage' . $i . '" src="../images/thumbPC/image' . $i . '.jpg" width="900" height="auto" alt="" />';
}
?>
</div>
<div class="galleryPreviewArrows">
<a href="#" class="previousSlideArrow"><</a>
<a href="#" class="nextSlideArrow">></a>
</div>
</div>
<div class="galleryNavigationBullets">
<?php
for ($b = 1; $b <= $imagesTotalPC; $b++) {
echo '<a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"><span>Bullet</span></a> ';
}
?>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// init variables
var imagesTotal = <?php echo $imagesTotalPC; ?>;
var currentImage = 1;
var thumbsTotalWidth = 0;
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
// SET WIDTH for THUMBNAILS CONTAINER
$(window).load(function() {
$('.galleryThumbnails a img').each(function() {
thumbsTotalWidth += $(this).width() + 10 + 8 + 4;
});
$('.galleryThumbnails').width(thumbsTotalWidth);
});
// PREVIOUS ARROW CODE
$('a.previousSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
currentImage--;
if (currentImage == 0) {
currentImage = imagesTotal;
}
$('img.previewImage' + currentImage).show();
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
return false;
});
// ===================
// NEXT ARROW CODE
$('a.nextSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
currentImage++;
if (currentImage == imagesTotal + 1) {
currentImage = 1;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
return false;
});
// ===================
// BULLETS CODE
function changeimage(imageNumber) {
$('img.previewImage' + currentImage).hide();
currentImage = imageNumber;
$('img.previewImage' + imageNumber).show();
$('.galleryNavigationBullets a').removeClass("active");
$('.galleryThumbnails a').removeClass("active");
$('a.galleryBullet' + imageNumber).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
}
// ===================
// AUTOMATIC CHANGE SLIDES
function autoChangeSlides() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
currentImage++;
if (currentImage == imagesTotal + 1) {
currentImage = 1;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
}
</script>
</body>
</html>
这是循环显示图像的代码:
<div class="galleryContainer">
<div class="galleryThumbnailsContainer">
<div class="galleryThumbnails">
<?php
for ($t = 1; $t <= $imagesTotalPC; $t++) {
echo '<a href="javascript: changeimage(' . $t . ')" class="thumbnailsimage' . $t . '"><img src="../images/thumbPC/image' . $t . '.jpg" width="auto" height="100" alt="" /></a>';
}
?>
</div>
</div>
<div class="galleryPreviewContainer">
<div class="galleryPreviewImage">
<?php
for ($i = 1; $i <= $imagesTotalPC; $i++) {
echo '<img class="previewImage' . $i . '" src="../images/thumbPC/image' . $i . '.jpg" width="900" height="auto" alt="" />';
}
?>
</div>
<div class="galleryPreviewArrows">
<a href="#" class="previousSlideArrow"><</a>
<a href="#" class="nextSlideArrow">></a>
</div>
</div>
<div class="galleryNavigationBullets">
<?php
for ($b = 1; $b <= $imagesTotalPC; $b++) {
echo '<a href="javascript: changeimage(' . $b . ')" class="galleryBullet' . $b . '"><span>Bullet</span></a> ';
}
?>
</div>
</div>
</div>
如何更改 galleryPreviewContainer 和 galleryPreviewImages 的图像。
这是我的滑块 CSS 代码:
a,
.galleryThumbnails img {
transition: all 150ms linear;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
}
.galleryContainer {
margin: 40px auto;
width: 900px;
}
.galleryPreviewContainer {
position: relative;
}
.galleryPreviewImage img {
display: none;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
box-shadow: 5px 5px 0 0 #c1c1c1;
position: relative;
top: 0;
left: 0;
}
img.previewImage1 {
display: block;
}
.galleryPreviewArrows a {
font-family: Arial;
font-size: 30px;
background: rgba(0, 0, 0, 0.3);
width: 70px;
height: 70px;
line-height: 70px;
display: block;
text-align: center;
color: #FFF;
text-decoration: none;
border-radius: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
position: absolute;
left: 20px;
top: 50%;
margin-top: -35px;
}
a.nextSlideArrow {
right: 20px;
left: auto;
}
.galleryPreviewArrows a:hover {
background: #000;
margin-top: -40px;
}
.galleryNavigationBullets {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
}
.galleryNavigationBullets span {
display: none;
}
.galleryNavigationBullets a {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
background: #ddd;
}
.galleryNavigationBullets a:hover,
.galleryNavigationBullets a.active {
background: #555;
}
.galleryThumbnailsContainer {
width: 900px;
overflow-x: auto;
margin-top: 30px;
margin-bottom: 40px;
padding: 20px 0;
}
.galleryThumbnails {
width: 2000px;
}
.galleryThumbnails img {
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
margin-right: 10px;
border: 4px solid #e0e0e0;
position: relative;
top: 0;
}
.galleryThumbnails a:hover img {
top: -5px;
border: 4px solid #999;
}
.galleryThumbnails a.active img {
border: 4px solid #0077be;
}
.galleryDescription > div {
display: none;
}
.galleryDescription > div.visible {
display: block;
}
一个不错的选择是使用压缩图像。 一旦图像被压缩,它可能会占用原来大小的大约 1/3 甚至 1/4。 由于文件较小,浏览器加载它所需的时间更少,这意味着加载速度更快。 例如,像TinyJPG这样的网站可以帮助您优化/压缩图像。 您可以从 5MB 图像文件传递到 380KB 图像文件,而不会损失太多分辨率。 这大大提高了您网站的加载速度和时间。 您还可以在浏览器中缓存图像。 但这对您的项目来说可能有点太复杂了。 这是优化加载速度的两种简单方法。 Google 有一个很好的工具,可以让您检查网站的效率。 它称为Google Page Insights 。 它可以帮助您了解可以或需要改进网站的地方,并在需要时向您建议解决方案。 我希望这有帮助!
研究:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.