Home/ Questions/Q 8795609
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:25:31+00:00

I am getting an inconsistent error with my script. Often times everything works fine,

  • 0

I am getting an inconsistent error with my script. Often times everything works fine, however, every now and then I am getting the following error: ReferenceError: fadeIn is not defined

Here is the relevant code:

In the <head>

    <script type="text/javascript" charset="utf-8">
        window.fadeIn = function(obj) {
            var item = $(obj).parent();
            item.fadeIn(1000);
        }
    </script>

In the <body>

 <div class="item" style="display:none"><img onload="fadeIn(this)" src="/uploads/thumbs/{{image.url}}"><br>{{ image.description }}</div>

Again, The images are loading and fading in most of the time but every now and then I get the error and the images do not fade in.

Is there a better way to approach this? Or just something I’m missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to make sure your code is loaded after the DOM is ready.

    window.onload = function(){
    var fadeIn = function(obj) {
         var item = $(obj).parent();
         item.fadeIn(1000);
    };
};

    … that’s a partial fix, but not really, because in all likelihood, your <img/> tags with the onload hardcoded into them is going to try to fire that method before it’s available.

    Since you’re using jQuery anyhow, you should look at something like this:

    $(function() {
    $(".item img").load(function(){
         $(this).fadeIn(1000);
    });
});

    and get rid of the hardcoded onload from your img tags.

    It should be noted, also, that there are caveats listed on the .load() API page:

    From the docs (http://api.jquery.com/load-event/):

    Caveats of the load event when used with images

    A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

    It doesn’t work consistently nor reliably cross-browser
    It doesn’t fire correctly in WebKit if the image src is set to the same src as before
    It doesn’t correctly bubble up the DOM tree
    Can cease to fire for images that already live in the browser’s cache

    A better solution might be to hide the images with CSS, then after the load event is fired, fade them in.

    (Even better than that might be to let browser behavior be, as your results may be mixed, and users seeing a blank page might instead hit the reload button thinking their browser glitched, before your animations are complete. … just a friendly warning that these kinds of DOM manipulations can sometimes have unintended side-effects on user behavior!)

    • 0