Question

我创建了一个网站，这里是a link。很抱歉，它使用的是另一种语言，但是您将鼠标悬停在顶部菜单上最左侧的蓝色按钮上，然后单击顶部的绿色按钮。您会看到肉酱缓慢加载的意面和图像。我正在用jQuery轻拍此图像。您可以在下面看到代码。

我尝试在论坛中搜索答案，但找不到任何有用的信息。

这是我的LAST页面中加载缓慢图片的代码：

    <!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>

您将在附件的中间看到图像：

$('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

您的图像似乎是3036px×3099px。对于图像而言，这是巨大的。不仅尝试按比例缩小图像，还应使用图像优化器，例如ImageAlpha（免费：https://pngmini.com/）

Answer 2

为了优化您的网站并确保遵守通常的最佳做法，请在Chrome上打开您的网站，按F12键，然后转到“审核”标签，根据需要进行配置，然后单击“运行审核”。 / p>

您将看到您的网站出了什么问题，即：未优化图像，未缩小CSS / JS。通过这些结果，您知道加载所需的时间太长，以及哪个文件/脚本/等等。优化。

以下是一些有关如何优化图像的信息：https://developers.google.com/web/tools/lighthouse/audits/oversized-images

JavaScript和HTML5图片加载速度非常缓慢

2 个答案: