Onload JavaScript sometimes doesn't execute

Question

I have encountered an issue with my JavaScript. Sometimes, the code doesn't execute at all and i can't corelate this to a specific thing, like throwing an error and halting the code or something similar. What i intend to do is to change the picture (a logo) depending of the resolution of the device.

 function logo_change() {
  if ( document.body.clientWidth < 390 ) {
   document.getElementById('logo').style.display = 'none';
   document.getElementById('logo-m').style.display = 'block';
  }
  else {
   document.getElementById('logo-m').style.display = 'none';
   document.getElementById('logo').style.display = 'block';
  }
 }
 window.onresize = function() {
  logo_change();
 };
 window.onload  = function() {
  logo_change();
 };

#logo {
  max-width: 20%;
  min-width: 185px;
  float: left; 
  margin-top: 17px;
}
#logo-m {
  width: 50px;
  float: left;
  margin-top: 17px;
  display: none;
}

<a id='logo-l' class="logo-l" href="index.php">
 <img src="https://d1afx9quaogywf.cloudfront.net/sites/default/files/Logos/facebook-logo_0.png" id='logo' class="logo" name="logo" height="60"></img>
 <img src="https://www.ricksdailytips.com/wp-content/uploads/2016/08/f.png" id='logo-m' class="logo-m" height="50"></img>
</a>

I have tried of doing this with media queries doing basically the same thing( with display block and none), but the link would collapse and such.

Also, if i resize the page, the code executes and the logo changes. Thus, i thing is is a window.onload thing.

Thanks for your responses.

https://stackoverflow.com/questions/588040/window-onload-vs-document-onload why don't you use document-onload? — nobjta_9x_tq, Jul 23 '18 at 16:56
I couldn't get it to work properly. Could you have a link or something? This was a quick and dirty solution so the logo doesn't destroy the UI @Pointy — TakeDown, Jul 23 '18 at 16:56
High chances that some network asset is still in progress and that's the reason youw window.onload is not firing. Like others have said move it to DOMContentLoaded — karthick, Jul 23 '18 at 17:01
I tried `document.onload` and i had the same result. Could it be that i have jquery loading? There are some other pieces of code in onload that are sometimes throwing error codes like some document.getElementById is null. — TakeDown, Jul 23 '18 at 17:04
@TakeDown well there can only be one `window.onload` function — if some other code also assigns to `window.onload` then your function won't be called. (The last one wins, in other words.) — Pointy, Jul 23 '18 at 17:06
@Pointy that might be something as well. SInce, i am using jQuery to load my menu.html into every page of the website. Also, i don't like using external javascript code so i have two window.onload — TakeDown, Jul 23 '18 at 17:10
Possible duplicate of [Hide/show image on small screen](https://stackoverflow.com/questions/51426376/hide-show-image-on-small-screen) — zero298, Jul 23 '18 at 17:10

score 1 · Accepted Answer · answered Jul 23 '18 at 17:03

1

To do this with CSS media queries:

#logo, #logo-m {
  display: none;
  /* other common properties */
}
@media screen and (max-width: 389px) {
  #logo-m { display: block; }
}
@media screen and (min-width: 390px) {
  #logo { display: block; }
}

answered Jul 23 '18 at 17:03

Pointy

405,095
59
585
614

1

I would say that since this is an image, you could even use `srcset` similar to my answer on this question: [Hide/show image on small screen](https://stackoverflow.com/a/51426960/691711) – zero298 Jul 23 '18 at 17:10
that seemed to work this time. I don't know what i did wrong last time i tried to use media queries. Probably just some cascading issue. Thanks for the quick replies. – TakeDown Jul 23 '18 at 17:10
@zero298 yes that's a great point; I'd do it this way because I have a framework that basically does it automatically, but you're right. – Pointy Jul 23 '18 at 17:11

Onload JavaScript sometimes doesn't execute

1 Answers1