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的其他资源已开始下载
之前，不应下载资源
推迟：在用户看到资源之前，即在视口内并且显示不是没有资源时，不得下载资源。

虽然我不确定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函数中。

Answer 2

我最终使用Cycle2 它逐步加载图像。

我认识的程序员写道：

＆＃34;您需要使用类＆＃34;循环幻灯片＆＃34;来修改html文件中的div-Block。并将以下属性添加到标记：

  data-cycle-loader=true
  data-cycle-progressive="#slideshow-images"

你的div-Tag现在应该只包含一个图像，第一个。所有其他图像去列表。＆＃34;幻灯片图片＆＃34;是一个id（由前面的＃表示）列表中列出了您希望幻灯片显示和加载的所有图像逐步。它具有以下形式：

  <script id="slideshow-images" type="text/cycle">
  [
    "<img src='http://malsup.github.io/images/beach2.jpg'>",
    "<img src='http://malsup.github.io/images/beach3.jpg'>",
    ...
    "<img src='http://malsup.github.io/images/beach9.jpg'>"
  ]
  </script>"

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

2 个答案: