2

嗨，我正在使用这个插件在显示之前预加载所有内容。 http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/

但我不知道为什么这不起作用.. 这是演示

HTML

<div class="preload">
    <img src="http://placehold.it/500/500" />
    <img src="http://placehold.it/300/500" />
    <img src="http://placehold.it/600/500" />
    <img src="http://placehold.it/400/500" />
</div>

JS

$(document).ready(function () {
    $("body").queryLoader2({
        barColor: "#cccccc",
        backgroundColor: "#ffffff",
        percentage: true,
        barHeight: 3,
        completeAnimation: "fade",
        minimumTime: 200
    });  
});
4

1 回答 1

4

如果您只在 JS Fiddle 中对此进行测试，那么问题是 JS Fiddle 添加了一个：

$(window).load(function(){

这反过来又破坏了你的代码。

如果你只是使用：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>



  <link rel="stylesheet" type="text/css" href="/css/result-light.css">



      <script type='text/javascript' src="http://gayadesign.com/scripts/queryLoader2/js/lib/jquery.queryloader2.js"></script>


  <style type='text/css'>

  </style>



<script type='text/javascript'>
$(document).ready(function () {
    $("body").queryLoader2({
        barColor: "#cccccc",
        backgroundColor: "#ffffff",
        percentage: true,
        barHeight: 3,
        completeAnimation: "fade",
        minimumTime: 200
    });  
});


</script>


</head>
<body>
  <div class="preload">
    <img src="http://placehold.it/500/500" />
    <img src="http://placehold.it/300/500" />
    <img src="http://placehold.it/600/500" />
    <img src="http://placehold.it/400/500" />
</div>

</body>


</html>

然后它工作。

于 2013-09-19T09:25:14.163 回答