function on('load' ... ) not working after page refresh

Question

Helo there.

We have a javascript function when the page is loading, then "open" some stuff. it's made with .on('load', function().

Is works great for the first pageview. but when you refresh the page, the function does not work anymore/is not triggert. when you reload the page with shift+refresh it works again. is there a workaround or another solution?

thanks!

<script>
$('#zoomBtn img').on('load', function() {
    $('.zoom').find('#musicinfo').toggleClass('showList');
});
</script>

Correct me if I'm wrong, but you are using something additional - is it jQuery? — Mike Brockington, Sep 12 '19 at 14:09
The `load` event will not fire if the image is loaded from cache. https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached — Turnip, Sep 12 '19 at 14:20

score 0 · Answer 1 · answered Sep 12 '19 at 14:11

Probably the images are loaded before you bind the event. Something like this should help.

function showList () {
  $('.zoom')
    .find('#musicinfo')
      .toggleClass('showList');
}

$('#zoomBtn img')
  .on('load', showList)
  .each( function () {
    if (this.complete) {
      showList()
    }
  })

function on('load' ... ) not working after page refresh

1 Answers1