Member Avatar for Member #453901

Hello,

I have a web page under construction and while doing browser checks I noticed that Chrome does not load the page correctly on the first load. Every time I clear the cache and load the page it load completely wrong but after one or two refreshes it loads fine and then continues to load fine until I close and reopen the browser or clear the cache.

So far Chrome is the only one to do this. The orange logo should be in the middle with two links on either side. When it loads incorrectly the logo gets pushed to the right and only two links display, on the left.

What could be causing this?

Thanks,
Jesse

  • 3 Contributors
  • 7 Replies
  • 261 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by pixelsoul

Dani AI

Generated

Given the symptoms reported by (first load wrong, refresh fixes it) and the experiments from and , this is most likely a timing/race issue: layout or assets that the slider and logo positioning depend on are not fully available when the plugin runs, so initial measurements end up incorrect and the layout shifts after a refresh.

Quick diagnostic checklist

  • Reproduce the “first load” reliably in Chrome DevTools (Network → disable cache, use throttling) and watch Console + Network for errors or missing files.
  • Record a Performance timeline to find where layout/paint happens and whether the slider init runs before images/CSS are ready.
  • Export a HAR or a timeline capture if deeper inspection is needed.

Practical fixes and safer approaches

  • Reserve layout space so the logo/slider don’t shift: add explicit image dimensions or an aspect-ratio box in CSS so the browser can lay out placeholders before images load.
  • Prefer CSS-based centering (flexbox or transform centering) so the logo is positioned correctly even if JS hasn’t run.
  • Make slider initialization occur after image assets are loaded (init on full load or on the slider’s after-load callback) rather than only on DOM ready.
  • If scripts must sit in the head, use non-blocking loading so they don’t stall render; for example:
<script src="js/slider.js" defer></script>

Other notes

  • Fix any console errors or missing resources uncovered by DevTools (source-map 404s or missing files can hide the true failure).
  • Use preload for critical CSS/fonts if they change initial metrics.

These steps prevent reliance on a fragile load order and eliminate the “first‑load only” failures without forcing all scripts into the head.

Recommended Answers

All 7 Replies

Member Avatar for JorgeM

I tried with Chrome and the first time i accessed the page, the only issue i saw was that your Nivo slider didnt render correctly. A refresh fixed the problem. I've cleared cache tried to reproduce the problem and have not been able to.

The only other issue i can see if that Chrome's console reports a problem with a 404 on a script that you are referencing.

404 (Not Found)

Member Avatar for Member #453901

I have no idea how to go about fixing this, as it's not a persistent problem. Like I said, a couple of refreshes and it fixes itself, but I can't have it always loading wrong the first time.

Do you have any idea what could possibly cause a problem like this? Have you ever seen it before?

Member Avatar for JorgeM

The problem is that I wasn't able to reproduce the issue that you described. Have you seen this issue from more than one PC?

Member Avatar for Member #453901

It's happening on all three computers I've tested it on, two different macs and one PC.

Member Avatar for pixelsoul

Put the jQuery and Nivo slider scripts up into the head of the document and test to see if it does the same thing with it there.

You might also try putting into a document.ready instead to see if that changes the behavior on how it loads.

$(document).ready(function() {
  $('#slider').nivoSlider();
});
Edited by pixelsoul
Member Avatar for Member #453901

Changing it to document ready did not fix the problem but putting the slider scripts in the head did the trick! Is it "acceptable" to have the scripts in the head section or is there something I should be doing to make it more correct? I've always read that scripts should be right at the end of the body.

Member Avatar for pixelsoul

The JS can go in the header, it is just good practice to put it in the footer if you can, this way if it has a problem loading it doesn't cause the rest of the page to render slowly. Sometimes you just can't avoid putting it in the header though with scripts that affect the dom.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.