网站页面加载图像需要一段时间

Question

So I have a page on my website that has an image slider but the resolution of the images that I load is 4032x3024 and it takes a while.所以我的网站上有一个页面有一个图像滑块，但我加载的图像的分辨率是 4032x3024，这需要一段时间。 They're JPEG images.它们是 JPEG 图像。 I still want to show the full resolution of the images.我仍然想显示图像的完整分辨率。 Is there a way I can load maybe a lower resolution version first then when the good image is fully loaded, I just swap them.有没有办法可以先加载较低分辨率的版本，然后当好图像完全加载时，我只需交换它们。

Here's my code:这是我的代码：

<?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">&lt;</a>
                        <a href="#" class="nextSlideArrow">&gt;</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>

This is the code that loops to show the images:这是循环显示图像的代码：

        <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">&lt;</a>
                        <a href="#" class="nextSlideArrow">&gt;</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>

How can I change the image of the galleryPreviewContainer and galleryPreviewImages.如何更改 galleryPreviewContainer 和 galleryPreviewImages 的图像。

Here's my CSS code for the slider:这是我的滑块 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;
}

Answer 1

A good option would be to use compressed images.一个不错的选择是使用压缩图像。 Once an image is compressed, it can take up to about 1/3 or even 1/4 of the size it originally took.一旦图像被压缩，它可能会占用原来大小的大约 1/3 甚至 1/4。 Since the file is smaller, it takes less time for the browser to load it, which means faster loading times.由于文件较小，浏览器加载它所需的时间更少，这意味着加载速度更快。 For example there's websites like TinyJPG that can help you optimize/compress your images.例如，像TinyJPG这样的网站可以帮助您优化/压缩图像。 You can pass from a 5MB image file to a 380KB image file without losing too much resolution.您可以从 5MB 图像文件传递到 380KB 图像文件，而不会损失太多分辨率。 That improves a lot the loading speed and time of your website.这大大提高了您网站的加载速度和时间。 You can also cache the images in the browser.您还可以在浏览器中缓存图像。 But that's maybe a little bit too complicated for your project.但这对您的项目来说可能有点太复杂了。 Those are two easy ways to optimize the loading speed.这是优化加载速度的两种简单方法。 Google has a nice tool that let's you check the efficiency of your website. Google 有一个很好的工具，可以让您检查网站的效率。 It's called Google Page Insights .它称为Google Page Insights 。 It can help you see where you can or need to improve your website and will suggest you solutions if needed.它可以帮助您了解可以或需要改进网站的地方，并在需要时向您建议解决方案。 I hope this helps!我希望这有帮助！

. .

Research:研究：

网站页面加载图像需要一段时间

问题描述

1 个解决方案

解决方案1
-1 已采纳 2020-02-10 20:17:39

网站页面加载图像需要一段时间

问题描述

1 个解决方案

解决方案1 -1 已采纳 2020-02-10 20:17:39

解决方案1
-1 已采纳 2020-02-10 20:17:39