强制浏览器重绘图像答案

【问题标题】：Force browser to redraw an image强制浏览器重绘图像
【发布时间】：2012-10-10 22:26:53
【问题描述】：

有没有办法强制浏览器在没有 HTTP 获取的情况下使用相同的源和相同的图像重绘图像？

我需要这样做，因为 Chrome 存在渲染错误。当我移动图像顶部的可拖动元素时，该元素会留下白色痕迹。

【问题讨论】：

分离，然后重新附加到 DOM？将其src 属性设置为null，然后返回其原始值？
我认为“HTML get”是指“HTTP get”...

标签： javascript jquery html css jquery-ui

【解决方案1】：

如果你做一个简单的：

$("#myimg").hide()

然后

$("#myimg").show()

【讨论】：

$('#myImg').hide(); setTimeout(function(){$('#myImg').show();}, 1);
拖动停止时有效，但在拖动过程中不会，因为图像只是隐藏了

【解决方案2】：

在放置后更新图像的 src 属性（通过 JavaScript）可能会起作用。（如果文件在缓存中，应该没有'html get'。

【讨论】：

我试过了，但是我得到了一个 html get 与图像的闪烁。
但是错误的传输可能是问题的根源，因此从缓存中获取图像可能无法消除问题。将src 替换为相同的地址但添加查询?rand=3435436 可能有助于刷新浏览器缓存并再次拉取图像。

【解决方案3】：

要强制重绘，请尝试调用：

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

不必定义“刷新”类，但这通常可以解决 dom 元素在应有的时候没有被重绘或更新的问题。

【讨论】：

【解决方案4】：

将新图像（具有相同来源）添加到文档中。使用position: absolute 将其覆盖在旧的错误渲染图像上。这可能会避免屏幕闪烁/闪烁。

这是假设图像已正确下载。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我建议设置不透明度。 opacity 属性将强制浏览器完全重绘元素，而不会像这样影响拖动。

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]);
    }

}

示例用法：

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

【讨论】：