时间戳

首页 > 解决方案 > 添加页面加载

jquery - 添加页面加载

问题描述

我正在尝试使随机播放功能在页面加载时发生。到目前为止，只成功地打破了它。

我试过了

$(window).bind("load",function(){});

但似乎无法让它做我需要它做的事情。

这是一个具有工作模型的Codepen

任何帮助，将不胜感激。当页面加载时，我更愿意点击重置按钮并重置页面和图像随机播放（图像 2-5），我可以完全删除随机播放按钮。

标签： jquery

解决方案

由于我有一个工作版本，我将提供详细信息作为解决方案（评论太多了），希望一些细节将是纠正您拥有的无法正常工作的版本所需要的。

我使用的三个文件与你的一致，我称为so.html、so.js和so.css.

HTML：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>SO Test</title>
    <link rel="stylesheet" type="text/css" href="/test/css/so.css" />
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script language="JavaScript" src="/test/script/so.js"></script>
  </head>

<body>
<div class="container shuffleImg">
... <!-- here I named the images uniquely, "Image 1" through "Image 8";
     otherwise same as your code -->
</div>

<button class="btn btn-danger" id="go">Shuffle</button>
<hr>
<button class="btn btn-danger" onClick="window.location.reload(true);">Reset</button>

</body>
</html>

JS：

//card flip function start
$(function() {
  // No change here to your first definition of this function
});

function rotateCard(btn) {
  //No change to this function
}
// card flip funtion end

// I hoisted shuffle out of the next $(function() ...) block since I use it again later
function shuffle() {
  // No change to function content
}

//random function start
$(function() {
  $("#go").on("click", shuffle);
});

$(window).load(function() {
  shuffle()
});
//random funtion end

CSS 我根本没有改变。

这是使用此代码的测试站点：Test。

编辑： 我也使用最新的 jQuery 库，因为主要提供商提供“最新”的链接。我没有注意到您的 jQuery 代码中有任何特别奇特的东西，但您的问题可能是您包含旧版本和/或非官方版本。

编辑： 根据评论，您已经表明您正在使用 jQuery 的“slim”包。顾名思义，“slim”包不包含 jQuery 的几个特定功能。请参阅这个 SO 问题，例如：What are the difference between normal and slim package of jQuery。特别是，不支持您使用的动画功能，也不支持该.load功能。所以$(window).load(...)会失败。这可以在浏览器中查看开发控制台看到。

推荐阅读