Is there a way to force the browser to redraw an image with the same source and same image without an HTTP get?

I need to do this because Chrome has a rendering bug. When I move a drag-gable element that is on top an image the element leave a white trace.

Is there a way to force the browser to redraw an image with the same source and same image without an HTTP get?

I need to do this because Chrome has a rendering bug. When I move a drag-gable element that is on top an image the element leave a white trace.

• javascript
• jquery
• html
• css
• jquery-ui

• Detach, and re-attach it to the DOM? Set its src property to null, and than back to its original value? – Šime Vidas Commented Oct 10, 2012 at 22:29
• 2 By "HTML get" you mean "HTTP get" I presume... – Šime Vidas Commented Oct 10, 2012 at 22:30

6 Answers 6

What if you do a simple:

$("#myimg").hide() 

then

$("#myimg").show()

Updating the src attribute of the image (via JavaScript) after the drop might work. (And if the file is in cache, there should be no 'html get'.

To force a redraw, try calling:

$("body").toggleClass("refresh");

The class "refresh" doesn't have to be defined, but this usually fixes issues with dom elements not being redrawn or updated when they should.

Add a new image (with the same source) to the document. Use position: absolute to put it over the old mis-rendered image. That might avoid screen flash/flicker.

This is assuming that the image was downloaded correctly.

$('#myImg').hide();
setTimeout(function(){$('#myImg').show();}, 1);

I would recend setting the opacity. The opacity property will force the browser to do a plete redraw of the element without effecting the dragging like so.

function startDragFix(ele){
    var originalOpacity = ele.style.opacity, curOpacity = originalOpacity;
    var curID = [0, originalOpacity, ele];
    curID[0] = requestAnimationFrame(function repeatTransparencySwitch(){
        var direction = originalOpacity >= .5 ? -1 : 1;
        if (curOpacity === originalOpacity){
            // 1/64th of a transparency %, barely noticeable, but just enough
            ele.style.opacity = (curOpacity += direction*.015625);
        } else {
            ele.style.opacity = curOpacity = originalOpacity;
        }
        curID[0] = requestAnimationFrame(repeatTransparencySwitch);
    });
} 
function endDragFix(data){
    if (data) {
           data[2].style.opacity = originalOpacity;
           cancelAnimationFrame(data[0]);
    }

}

Example usage:

var fixID = startDragFix(document.getElementById("foobar"));
setTimeout(function(){
    endDragFix(fixID);
}, 5000);