JavaScript and HTML5 images loading really slowly

Question

I made a website, Here's a link to it. I am sorry it is in a different language, but you to hover over the blue button to most left on the menu at the top, and then click on the top green button. You will see and image of pasta with meat sauce loading very slowly. I am appeding this image with jquery. you can see the code below.

I have tried searching the forums for an answer but couldn't find anything helpful.

This is my code for the LAST page with the slow loading image:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Recipe List</title>  
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">                
    </script>
    <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    <body id="body">
<header>

</header>
<main>
<h1 id="thead" class="important-title thead"></h1>
    <table id="tbody-main">

<tbody>
    <script type="text/javascript">

        $(document).ready(onCallPHP());
        function onCallPHP(){
            var h =0;


            var names = <?php echo '["' . implode('", "', getFileAttr('name')) . '"]' ;?>;
            var meals = <?php echo '["' . implode('", "', getFileAttr('meal')) . '"]' ;?>;
            var categorys = <?php echo '["' . implode('", "', getFileAttr('category')) . '"]' ;?>;
            var files = <?php echo '["' . implode('", "', getFiles()) . '"]' ;?>;
            console.log(files);
            for(var i = 0; i < <?php echo getNum();?>; i++){


                if(h == 2 || i == 0){
                $('tbody').append('<tr>');
                h = 0;
                var name = names[i];
                var meal = meals[i];
                var category = categorys[i];

                $('tbody').append('<td id=\"' + category + '\" class=\"td\"><div class=\"center-div tdl\"><h1 class=\"h1Slot\">' + meal + "</h1><br><h1 class=\"recipe-name\" style='font-size: 30px;'>" + name + '</h1><a class="img-a"><img class="recipe-img" src="/uploads/' + files[i] +'" alt="" width="500" height="500" style="display:block"/></a></div><div id="' + i + '" class="numClass" style="display:none;"></div></td>');

                }else{

                var name = names[i];
                var meal = meals[i];
                var category = categorys[i];

                $('tbody').append('<td id="' + category + '" class="td"><div class="center-div tdr"><h1 class="h1Slot">' + meal + "</h1><br><h1 class=\"recipe-name\" style='font-size: 30px;'>" + name + '</h1><a class="img-a"><img class="recipe-img" src="/uploads/' + files[i] + '" alt="" width="500" height="500" style="display:block"/></a></div></div><div id="' + i + '" class="numClass" style="display:none;"></div></td>');
                $('tbody').append('</tr>')
                }

                h++;
            }
            console.log(names);
    sessionStorage.setItem('names', names);

        }
    </script>
    <?php
    function getNum(){
        $directory = getcwd(). "/uploads/";
$files = scandir($directory);
$num_files=count($files)-2;
        return($num_files);
    }

    function getFiles(){
        $directory = getcwd(). "/uploads/";
$files = scandir($directory);
    return array_slice($files,2) ;  
    }

    function getFileAttr($value){
        if($value == "name"){
            $array = count(file('names.txt'));
            $returnVal;
            for($i = 0; $i< $array; $i++){
            $returnVal[$i] = trim(file('names.txt')[$i]);
            }
        return $returnVal;
        }
        elseif($value == "meal"){
            $array = count(file('meal.txt'));
            $returnVal;
            for($i = 0; $i< $array; $i++){
            $returnVal[$i] = trim(file('meal.txt')[$i]);
            }
        return $returnVal;
        }
        elseif($value == "category"){
            $array = count(file('category.txt'));
            $returnVal;
            for($i = 0; $i< $array; $i++){
            $returnVal[$i] = trim(file('category.txt')[$i]);
            }
        return $returnVal;
        }

    }

    ?>
    </tbody>
</table>
</main>

    </body>

     </html>

you will see the image in the middle of the append:

$('tbody').append('<td id=\"' + category + '\" class=\"td\"><div class=\"center-div tdl\"><h1 class=\"h1Slot\">' + meal + "</h1><br><h1 class=\"recipe-name\" style='font-size: 30px;'>" + name + '</h1><a class="img-a"><img class="recipe-img" src="/uploads/' + files[i] +'" alt="" width="500" height="500" style="display:block"/></a></div><div id="' + i + '" class="numClass" style="display:none;"></div></td>');

Answer 1

Your image appears to be 3036px × 3099px. That's huge for an image. Try not just to scale it down, but use an image optimizer, such as ImageAlpha (which is free: https://pngmini.com/ )

Answer 2

In order to optimize your website and to be sure to comply with usual best practices, open your website on Chrome, press F12, then go to "Audits" tab, configure it as you wish and click "Run audits".

You will see what's wrong with your website ie: images not optimized, CSS/JS not minified. With those results, you know what is taking too long to load and which file/script/etc. to optimize.

Here is some info on how to optimize images: https://developers.google.com/web/tools/lighthouse/audits/oversized-images

JavaScript and HTML5 images loading really slowly

Question

2 answers

solution1
1 ACCPTED 2019-01-04 14:07:22

solution2
-1 2019-01-04 14:31:20

JavaScript and HTML5 images loading really slowly

Question

2 answers

solution1 1 ACCPTED 2019-01-04 14:07:22

solution2 -1 2019-01-04 14:31:20

solution1
1 ACCPTED 2019-01-04 14:07:22

solution2
-1 2019-01-04 14:31:20