Question

如何最小化图像的加载时间？例如，我的首页上有20倍相同的图像（大小为1920x1080）

这里是图片

现在我想要以固定尺寸裁剪图像。为此，我使用此css代码

.startpage_image_container{
	max-width: 100px;
	max-height: 200px;
	display: inline-block;
}

.image{
	object-fit: cover;
	object-position: center center;
	height: 200px;
	width: 100px;
}

.section{
  width: 300px;
}

<div class="section">
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
<div class="startpage_image_container">
  <img class="image" src="http://www.wallpaperup.com/uploads/wallpapers/2013/03/28/65631/big_thumb_3c7c52cc466a1c188ced0ff17d2ea558.jpg"/>
</div>
</div>

但加载时间仍然非常高。如何使用PHP最小化图像并减少加载时间？在用户在页面底部滚动后，如何在页面上重新加载内容？

Answer 1

我用这个：

<?php
 echo "<script>
      // http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
      function preloader() {
        if (document.getElementById) {
          document.getElementById(\"preload-01\").style.background = \"url('img/bg-contact.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-02\").style.background = \"url('img/bg-faq.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-03\").style.background = \"url('img/bg-index.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-04\").style.background = \"url('img/bg-product.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-05\").style.background = \"url('img/callout-money.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-06\").style.background = \"url('img/callout-question-mark.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-07\").style.background = \"url('img/callout-wow.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-08\").style.background = \"url('img/featured.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-09\").style.background = \"url('img/footer-vlad.png') no-repeat -9999px -9999px\";
          document.getElementById(\"preload-10\").style.background = \"url('img/vlad.png') no-repeat -9999px -9999px\";
      }
      function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
          window.onload = func;
        } else {
          window.onload = function() {
            if (oldonload) {
              oldonload();
            }
            func();
          }
        }
      }
      addLoadEvent(preloader);
      // End pre-loader functions
    </script>";
?>

Answer 2

首先，为什么有这么多图像？使用一个:)在PHP中调整大小有点困难，因为无法获得浏览器的高度和宽度。使用javascript，您可以获得浏览器的分辨率，并在加载之前使图像适合该大小。我构建了一个可以使用的快速插件。它使用的属性srcset，我认为目前无效？

https://github.com/sourRaspberri/srcset-jQuery-plugin/blob/master/main.js

该插件基本上是＆＃39;获得不同的图像分辨率，找到最合适的尺寸。但它可能不是最好的方法。

另一个想法，如果问题在于您正在加载的图像数量。尝试使用javascript复制图像，而不是多次在HTML中编写。

图片应该加载快，改变分辨率？

2 个答案: