Force Dom Redraw With Javascript On Demand

The title of the question expresses what I think is the ultimate question behind my particular case. My case: Inside a click handler, I want to make an image visible (a 'loading' a

Solution 1:

Use JQuery show and hide callbacks (or other way to display something like fadeIn/fadeOut).

http://jsfiddle.net/JLmh4/3/

$(document).ready(function () {
    $('#enlace').click(function () {
        var kitty = $('#kitty');


        // see: http://unixpapa.com/js/sleep.htmlfunctionsleepStupidly(usec) {
            var endtime = newDate().getTime() + usec;
            while (newDate().getTime() < endtime);
        }

        kitty.show(function () {

            // simulates bussy proccess, calling some function...sleepStupidly(4000);

            // when this triggers the img style do refresh!// but not beforealert('now you do see it');

            kitty.hide();
        });
    });
});

Solution 2:

Use window.setTimeout() with some short unnoticeable delay to run slow function:

$(document).ready(function() {
    $('#enlace').click(function() {
        showImage();

        window.setTimeout(function() {
            sleepStupidly(4000);
            alert('now you do see it');
            hideImage();
        }, 50);
    });
});

Live demo

Solution 3:

To force redraw, you can use offsetHeight or getComputedStyle().

var foo = window.getComputedStyle(el, null);

or

var bar = el.offsetHeight;

"el" being a DOM element

Solution 4:

I do not know if this works in your case (as I have not tested it), but when manipulating CSS with JavaScript/jQuery it is sometimes necessary to force redrawing of a specific element to make changes take effect.

This is done by simply requesting a CSS property.

In your case, I would try putting a kitty.position().left; before the function call prior to messing with setTimeout.

Solution 5:

What worked for me is setting the following:

$(element).css('display','none'); 

After that you can do whatever you want, and eventually you want to do:

$(element).css('display','block');