預加載圖像，然後更改背景javascript

即時更改腳本標記內的以下代碼的背景圖像。當背景發生變化時，這會導致白色閃光，我的所有頁面都是ajax。我不能像背景一樣選擇背景顏色，也可以在配置文件頁面上使用此背景，並且每個配置文件都有不同的背景。預加載圖像，然後更改背景javascript

是否有可能預載圖像，然後改變背景來停止whiteflash？感謝

$('body').css('background-image', 'url(../images/waves.jpg)'); 
    $('body').css('background-attachment', 'fixed'); 
    $('body').css('background-size', 'cover');

來源

2013-10-06 mxadam

你可以加載一個隱藏的圖像，並在圖像完成加載，這樣的改變：

function preloadImage(source, destElem) { 
    var image = new Image(); 

    image.src = source; 

    image.onload = function() { 
     var cssBackground = 'url(' + image.src + ')'; 

     $(destElem).css('background-image', cssBackground); 
    }; 
}

用法：

preloadImage('images/waves.jpg', 'body');

編輯：裹在函數內部的代碼。

編輯2：這是一個沒有背景閃爍的例子，而改變。 http://jsbin.com/admmx/4/edit?html,css,js,output。

來源

2013-10-06 15:08:16 Esteban

這使得頁面閃爍的白色，因爲它改變了背景，反正停止嗎？ – mxadam

沿着這些線應該做些什麼：http://jsbin.com/admmx/2/edit?css,js,output。它可能需要一點調整，只是讓我知道。 – Esteban

您可以使用Image（）對象預衝圖像。

var newImg = new Image(); 
newImg.src = "img2.jpg"; 
$('body').css('background-image', 'url('+ newImg.src +')');

來源

2013-10-06 15:09:48 CoursesWeb

這使頁面閃爍白色，因爲它改變背景，反正要停止？ – mxadam

我不知道它是否適合你，但我會使用包裝的背景和包裝的內容。這樣我就可以爲我的背景設置變化動畫，而不必擔心頁面的其他部分。如果您事先知道圖片，可以使用CSS類來平滑地更改圖片。

<body> 
<div id="bg-wrapper" style="position: absolute; left: 0; top: 0"></div> 
<div id="content-wrapper"></div> 
</body>

當然我會寫一些代碼來關注重新調整瀏覽器窗口的大小。

下面是一個例子fiddle

來源

2013-10-06 15:16:50 webduvet

預加載圖像，然後更改背景javascript

回答

相關問題