Add an on page load

Question

I'm trying to make the shuffle function happen on page load. So far only been successful at breaking it.

I've tried

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

but can't seem to get it to do what I need it to.

Here is a Codepen that has a working mockup

Any help would be appreciated. I would prefer to hit the reset button and have the page reset and the images shuffle (images 2-5) when the page loads and I can remove the shuffle button compltely.

aside from having to hit the shuffle button instead of it auto shuffling images 2-5 on page load yes. — Kyle Drew, Jun 03 '19 at 21:48
Nope, although not sure how that would resolve the issue considering all its doing is calling the function that should already be loaded by my external .js file. — Kyle Drew, Jun 03 '19 at 22:01
That's the point. If you do some research on page load, it doesn't necessarily do what you think it should. I had a similar issue and resolved it using the method I suggested to you since it ensures that shuffle is called after the other elements are loaded. Unless they aren't, for some reason. Just as a test it might be interesting to set a 1 second timer on page load to do the shuffle, just to see if it works when you wait long enough. — lurker, Jun 03 '19 at 22:07
Looking closely at your HTML, your images are fetched from other websites, and those could still be ongoing after the page is loaded (as far as js is concerned). — lurker, Jun 03 '19 at 22:13
I thought that may be an issue as well but have a local asset folder with placeholder images. I even tried a mix of local host images and remote host images. Issue persists. — Kyle Drew, Jun 03 '19 at 22:16
Local images take time to load too. Just less. See https://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery — lurker, Jun 03 '19 at 22:18
yes. If I `//$(function () {` and put in `$(window).load(function() {` it just breaks the shuffle function. — Kyle Drew, Jun 03 '19 at 22:34
I got myself out of that codepen environment and created a small test using the code you provided. I uniquely labeled the images so I could tell what was going on.. Firstly, the shuffle only shuffles the "second layer" cards I noticed. Given that, both methods I suggested worked. I could put a `` at the end of the HTML, or I could define `$(window).load(function () { shuffle() });` in javascript and both methods worked (they did exactly what the shuffle button does when the page is reloaded). I'm using Chrome. — lurker, Jun 04 '19 at 00:42
Hmm...I'll have to test in chrome. I am testing in safari then maybe have to figure out a work around cause its going to have to be used in safari. And yes the second layer cards are the only ones that need to be shuffled. — Kyle Drew, Jun 04 '19 at 00:45

lurker · Answer 1 · 2019-06-06T13:08:46.400

Since I have a working version, I'll offer the details as a solution (it's too much for a comment) in hopes that some detail will be what's needed to correct the version you have that isn't working properly.

The three files I am using, that align with yours, I called so.html, so.js, and 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 I did not change at all.

Here's a test site using this code: Test.

Edit: I am also using the latest jQuery library since the major providers offer links to "latest". I didn't notice anything particularly exotic in your jQuery code, but it's possible your problem could be that you're including old and/or unofficial version.

Edit: Per the comments, you've indicated that you are using the "slim" package of jQuery. The "slim" package, as the name implies, does not include several particular features of jQuery. See this SO question, for example: What are the differences between normal and slim package of jQuery. In particular, the animation features which you use are not supported, nor is the .load function. So the $(window).load(...) will fail. This can be seen looking at the development console in the browser.

Soooo...I tried yours....funny thing. Yours did the exact same thing mine was doing. So that go the thinking. Whats different. I saw the libraries you used....I switched out my jquery source with yours...resolved the issue. It was the jQuery library I was using that was causing the problem. Once I fixed that, it acted like I needed it to. — Kyle Drew, Jun 05 '19 at 20:06
@KyleDrew I considered that, but thought it was low probability. You might be using features only available in a jQuery version later that the one you picked. I assume it's a version issue, not a source issue. Source should be reliable and consistent for a given version. What jQuery source did you use? — lurker, Jun 05 '19 at 20:13
`https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js`. That was the one I was using. — Kyle Drew, Jun 06 '19 at 00:53
@KyleDrew why did you choose slim? You might want to look at, for example, [What are the differences between normal and slim package of jQuery](https://stackoverflow.com/questions/35424053/what-are-the-differences-between-normal-and-slim-package-of-jquery) — lurker, Jun 06 '19 at 11:42
@KyleDrew I discovered that the slim package you included does not include the animations you are using and it does not appear to define the `.load` function. It's mentioned in the link I gave. I updated my answer to include these details. I went back and looked at your codepen and saw it also used the slim package, so of course would exhibit the same limitations. — lurker, Jun 06 '19 at 13:10

Add an on page load

1 Answers1