Website page takes a while to load images

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. They're JPEG images. 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.

Here's my CSS code for the slider:

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. 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. You can pass from a 5MB image file to a 380KB image file without losing too much resolution. 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. It's called 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:

Website page takes a while to load images

Question

1 answers

solution1
-1 ACCPTED 2020-02-10 20:17:39

Website page takes a while to load images

Question

1 answers

solution1 -1 ACCPTED 2020-02-10 20:17:39

solution1
-1 ACCPTED 2020-02-10 20:17:39