0

I know this is a common problem, but I've tried many suggested solutions to no avail. All I'm trying to achieve is for an image to fade in on page load (without briefly appearing for a split second before then disappearing, and fading up).

From what I've read, it's recommended to hide the image first using CSS, so that it shouldn't load until the fadein takes place:

    #imgfade {
    display: none;
    }

I know this working, because if I remove the Jquery, the image doesn't display. Jquery code:

$("#imgfade").fadeIn(600);

I've also tried:

$("#imgfade").hide().fadeIn(600);

It mostly works, but when visiting another site, then returning, the flicker happens. Sometimes going backwards and forwards results in it working 8/10 times, then sometimes flickering.

I've also tried this CSS (with the appropriate matching Jquery) to no avail:

#imgfade {
opacity: 0;
}

I suspect this may be to do with browser caching?

I'm using Bootstrap 3, but the custom CSS (as above) appears after the bootstrap (and other) CSS pages are loaded (in the section within ).

Can anyone recommend a completely fool proof method to avoid this occurring? I'm also getting the same problem with text on some of the other pages.

Many thanks in advance.

BSUK
  • 692
  • 1
  • 12
  • 28
  • You are doing it correctly. A full page reload will make it work properly, but when you leave then come back, the code runs again, thus fading it in from 0. a quick fix would be to only fade it in if it is hidden. – Kevin B Aug 03 '17 at 18:30
  • It's possible the page HTML is loading before your CSS file is loaded. Try moving `#imgfade {display:none}` into the `` of your document, or inline the styles onto the image itself. – Blazemonger Aug 03 '17 at 18:31
  • Thanks, good to know. Any ideas how to stop it flickering when returning back? I'm wondering if there's a "hack" or alternative method to prevent this.. Blazemonger: The Display:none code is in the of the document (for this reason), not in the separate CSS file. – BSUK Aug 03 '17 at 18:32
  • possibly related (with possible workaround): https://stackoverflow.com/questions/2638292/after-travelling-back-in-firefox-history-javascript-wont-run – Kevin B Aug 03 '17 at 18:33
  • Great suggestion Brian (I seem to recall that fix previously, for something slightly different). However, it still doesn't seem to work for the text. It still flashes up briefly before then disappearing and fading up. :( I'm amazed this is proving to be so difficult to resolve. – BSUK Aug 04 '17 at 17:53

2 Answers2

1

Few years after the original poster asked the question, but maybe this will help someone else who comes across this question while trying to solve the same issue.

I had this problem as well, and solved it by removing the 'transition' css style that was on the element I was trying to fade in / out.

It's not the prettiest solution, but in a pinch you could do something like:

$("#imgfade").css("transition", "0s")       //Turn off transition 
$("#imgfade").fadeIn(600, function() {      //Run jQuery fade/show/hide, with a callback
    $("#imgfade").css("transition", "1s")   //In the callback, reset the transition to its original value
})
Tim Johnston
  • 11
  • 2
0

I believe I've found a solution to this problem, which seems to be working for me 100%, each time.
Hopefully this might help someone else:

Placing the Jquery fadein code at the very end of the HTML (after /body, before /html) seems to fix the issue for some reason.

I don't really understand why, but I can only guess it's somehow related to the DOM loading order. Perhaps this is giving the CSS chance to be read properly (ensuring the div element is actually hidden) before attempting to fade it in.

BSUK
  • 692
  • 1
  • 12
  • 28