0

イメージのプリローダーを作成しようとしています。低解像度画像の配列と高解像度画像の配列があります。新しい画像オブジェクトを作成し、ループを実行してこれらの画像をプリロードします。次に、Jquery の行を使用して、高解像度のオブジェクトが読み込まれるまで低解像度の画像を使用するように背景を設定します。それが読み込まれると、Jquery の別の行を使用して、この高解像度の画像を使用するように背景を切り替えます。

私が抱えている問題は、コードが低解像度の背景設定をスキップし、高解像度の画像をロードすることです。

コードは次のとおりです。

// Low res image array
    var lowres = ["image1lr.jpg", "image2lr.jpg", "image3lr.jpg", "image4lr.jpg"];  

// Full res image array
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];      


// Low res image path
    var lowresimagepath = "url(images/rotate-background/low_res/";
// Full res image path
    var imagepath = "url(images/rotate-background/";

// Counter
    var i = 0;  

// Image preloading
       for(i=0; i<=images.length; i++) 
       {
           // Create object
           imageObj = new Image(); 

           imageObj.src = imagepath + images[i] + ')';
       }

//Generate random number
    var rannum = Math.floor(Math.random() * images.length);    

//Set background image to random low res image
    $(".bg_home").css({'background-image': lowresimagepath +lowres[rannum]+')'});       

//Once image objects are loaded switch to high res image 
     imageObj.onLoad= function(){ 
                          $(".bg_home").css({'background-image': imagepath + images[rannum] + ')'});    
                      }
4

3 に答える 3

0

Imageオブジェクトのsrcはcssプロパティです。URLだけである必要があります

imageObj.src = imagepath + images[i] + ')'; //Generates "url('whatever');"
//It can't be that, must just be the path.
于 2012-08-29T10:38:18.717 に答える
0

あなたのコードには多くの問題があります。これは私が作成したクリーンなバージョンですが、テストされていません。

(function(){ // prevents name conflicting with other scripts 

    var BASE_PATH_LOW_RES = "images/rotate-background/low_res/",
        BASE_PATH_HIGH_RES = "images/rotate-background/"; // since these are constants its better to use capitalized letters

    var lastLoadedIndex = 0, // you must ensure all images are loaded and its hard to preload them in parallel
        randomIndex = Math.floor(Math.random() * images.length),
        images = [
            {low: "image1lr.jpg", high: "image1.jpg"},
            {low: "image2lr.jpg", high: "image2.jpg"},
            {low: "image3lr.jpg", high: "image3.jpg"},
            {low: "image4lr.jpg", high: "image4.jpg"}
        ];

    var onComplete = function() {
        $(".bg_home").css({'background-image': 'url(' + BASE_PATH_HIGH_RES + images[randomIndex] + ')'});
    }

    var loadNext = function(){
        if(lastLoadedIndex == images.length) { // all images has been preloaded
            onComplete();
        } else {
            var imgTemp = new Image();
                imgTemp.src = BASE_PATH_HIGH_RES + images[lastLoadedIndex++].high;
                imgTemp.onLoad = loadNext;
        }
    }

    $(".bg_home")
        .css({'background-image': 'url(' + BASE_PATH_LOW_RES + images[randomIndex].low + ')'});       

    loadNext(); // start to preload every image one after another
})();
于 2012-08-29T10:54:09.620 に答える
0

私の経験では、image.onLoad はあまり信頼できません。IE やキャッシュされた画像など、機能しないさまざまなケースがあります。

https://github.com/desandro/imagesloadedを見てみましょう 。そのライブラリを使用しましたが、うまく機能します。

あなたのコードに関しては、かなり無効のようです：

// Low res image array
var lowres = ["image1lr.jpg", "image2lr.jpg", "image3lr.jpg", "image4lr.jpg"];  

// Full res image array
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];      


// Low res image path
var lowresimagepath = "images/rotate-background/low_res/";
// Full res image path
var imagepath = "images/rotate-background/";

//Generate random number
var rannum = Math.floor(Math.random() * images.length);      

for(var i = 0; i < images.length; i++) {
    var image = new Image();
    image.src = imagepath + images[i];

    if(i == rannum) {

        //Set background image to random low res image
        $(".bg_home").css({'background-image': 'url(' + lowresimagepath +lowres[i]+')'});       

        //Once image objects are loaded switch to high res image 
        iamge.onLoad= function() { 
                $(".bg_home").css({'background-image': 'url(' + imagepath + images[i] + ')'});   
        };

    }

}

これは、すべての画像がバックグラウンドで読み込まれている間に、単一のランダムな画像をバックグラウンドに追加するという考えの下で機能しています。

于 2012-08-29T10:23:54.737 に答える