如何从预加载中排除某些图像

Question

我真的找不到这个问题的答案。

我有一个网站的预加载器。网站上有一个包含 10mb 动画 gif 的幻灯片。

有没有办法从预加载中排除一些 gif，这样网站本身就不会等待在幻灯片开始时不会显示的 gif？ 谢谢！

这是我的预加载器：

HTML：

<!-- Preloader -->
<div id="preloader">
 <div id="status">
   <div class="parent">
     <div class="child">
       <p class="small">loading</p>
     </div>
   </div>
 </div>

CSS：

#preloader { position:absolute; top:0; left:0; right:0; bottom:0; background:#000; z-index:9999; }
#status { z-index:28; position:absolute; color:#fff; top:50%; height:280px; width:100%; margin-top:-140px; }
/* horizontal centering */
.parent {width:280px; margin:0px auto; position:relative; height:280px; z-index:11}
.child {text-align:center;}
/* vertical centering */
.parent {display: table}
.child {display: table-cell; vertical-align: middle; padding:0 50px; }
.child span { text-transform:uppercase; }

preloader.js：

jQuery(window).load(function() { 
"use strict";
        jQuery("#status").fadeOut(350); // will first fade out the loading animation
        jQuery("#preloader").delay(350).fadeOut(200); // will fade out the white DIV that covers the website.
    });

编辑： 我在This website

找到了以下内容

我仍然不知道如何使用它。有什么提示吗？你会说这可能是我要找的吗？谢谢。

影响预加载器

目前我们可以通过有限的方式影响预加载器的优先级（使用 javascript 隐藏资源就是其中之一），但 W3C 资源优先级规范提出了两个属性来帮助表明我们的意图。

lazyload : 在其他未标记为lazyload 的资源开始下载之前，不应下载资源

postpone : 资源在用户可见之前不得下载，即在视口内且显示不是无。

虽然我不确定 polyfill 有多容易，但也许推迟可以实现一种实现响应式图像的简单方法？

Answer 1

jQuery(window).load(function() { 
"use strict";
    jQuery("#status").fadeOut(350); // will first fade out the loading animation
    jQuery("#preloader").delay(350).fadeOut(200); // will fade out the white DIV that     covers the website.
    $('.somewhere').append("/*your slide gif code here*/"); // this will load after everything else is loaded. and make sure you put your script right before closing </body> tag, so it will load everything on the page 1st. it will increase you page load. 
});

并删除您的幻灯片 IMG html，并将其移动到您的 .load 函数中。