Background image Flickers on WebKit-based browsers (Safari / Chrome)

Question

I have an image frame that constantly and quickly changes images when users drag the frame. These images are generated in real time based on user interaction, so each created image should be loaded immediately after its appearance. The maximum speed can be 5 images per second. However, when using Safari / Chrome, I have a problem with flickering images. There is no such problem in Firefox. Each time the image changes, the server provides the browser with a new link to download a new image. The image frame will replace with a new image when Javascript discovers that this image is fully loaded. The code I used to determine the completeness of the download is shown below.

SImage = function(callback) // Define an image class with callback function
{
    var _this = this;
    var appname = navigator.appName.toLowerCase();
    _this.img = new Image();

    _this.get = function(url, answer){
        if (appname.indexOf("netscape") == -1){ // for IE
            _this.img.onreadystatechange = function () {
                if (_this.img.readyState == "complete"){
                    callback(_this.img.src);
                }
            };
        } else {    //other browsers, firefox, safari, chrome
            _this.img.onload = function () {
                if (_this.img.complete){
                    callback(_this.img.src);
                }
            };
        }       
        _this.img.src = url;
    }
};

And I use jquery to change the background of the image.

$('#layer_img').css('background-image', 'url("'+pviewImg.img.src+'")');

layer_img a, pviewImg SImage.

youtube, , - . - , , , . !

Answer 1

JPG -webkit-perspective: 1000 -webkit-backface-visibilty: hidden; -webkit-transform: translate3d(0,0,0); .