이미지 프리 로더

Question

이미지 프리 로더를 만들려고합니다. 저해상도 이미지 배열과 고해상도 이미지 배열이 있습니다. 새로운 이미지 객체를 만들고 루프를 통해 실행하여 이러한 이미지를 미리로드합니다. 그런 다음 고해상도 객체가로드 될 때까지 저해상도 이미지를 사용하도록 배경을 설정하기 위해 Jquery 행을 사용하고,이 고해상도 이미지를 사용하기 위해 Jquery의 또 다른 행을 사용하는로드를 사용합니다.

내가 겪고있는 문제는 코드가 저해상도 배경 설정을 건너 뛰고 고해상도 이미지를로드한다는 것입니다. 내 경험 image.onLoad에서

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

Answer 1

매우 안정되지 않습니다 : 여기에

는 코드입니다. 작동하지 않는 다른 경우가 있습니다 (예 : IE 또는 캐시 된 이미지.

좀보고 싶습니다. https://github.com/desandro/imagesloaded 저는이 라이브러리를 사용했으며 잘 작동합니다. 코드에 관해서는

, 오히려 잘못된 것 같다 : 모든 이미지가로드되는 동안, 당신의 생각은 AA 하나의 임의의 이미지가 배경에 추가하는 것입니다 가정하에 일하고

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

    } 

} 

배경.

Answer 2

이미지 개체의 src는 CSS 속성입니다. URL이어야합니다.

imageObj.src = imagepath + images[i] + ')'; //Generates "url('whatever');" 
//It can't be that, must just be the path. 

Answer 3

코드에 문제가 많습니다. 여기에 제가 작성한 클린 버전이 있지만 테스트되지 않았습니다.

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