3

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

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

4

6 回答 6

1

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

于 2012-10-10T22:29:32.777 回答
1

如果你做一个简单的怎么办：

$("#myimg").hide()

然后

$("#myimg").show()
于 2012-10-10T22:34:25.717 回答
1

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

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

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

于 2012-10-10T22:50:33.307 回答
0

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

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

于 2012-10-10T22:35:33.663 回答
0 
$('#myImg').hide();
setTimeout(function(){$('#myImg').show();}, 1);
于 2012-10-11T02:11:23.760 回答
0

我建议设置不透明度。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);
于 2018-03-26T18:22:33.823 回答