Question

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

但我不知道为什么这不起作用.. HERE IS THE DEMO

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

Answer 1

如果你只是在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>

然后它有效。

jQuery Preloader不工作

1 个答案: