jquery - 如何排除某些图像被预加载

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; }

预加载器.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 找到了以下内容

不过我还是不知道怎么用。有什么提示吗？你会说这可能是我要找的吗？谢谢。

Influencing the pre-loader

Currently there are limited ways we can influence the pre-loader’s priorities (hiding resources using javascript is one), but the W3C Resource Priorities spec proposes two attributes to help signal our intent.

lazyload : resource should not be downloaded until other resources that aren’t marked lazyload have started downloading

postpone : resource must not be downloaded until it’s visible to the user i.e. within the viewport and display is not none.

Although I’m not sure how easy it is to polyfill, perhaps postpone might enable a simple way of implementing responsive images?

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 函数中。