jQuery - 문서에서 사용되는 미리 정의 된 CSS 배경 이미지 만로드 하시겠습니까?

Question

여러 개의 배경 이미지가있는 여러 div가 있고 코드에 아래 표시된 것처럼 미리로드 할 수 있습니다. 일부 문서에서는 이러한 배경 이미지를 모두 사용하지 않으므로 문서에 사용되지 않는 경우에도 항상로드되는 많은 수의 배경 이미지를 미리 정의하는 대신 문서에 나타나는 인스턴스 만 미리로드하는 것이 좋습니다.

이미지를로드하는이 코드는 있지만 사용중인 경우에만로드 할 이미지와 같습니다.

$(document).ready(function() 
{ 
    var img = document.createElement('img'); 

    img.onload = function() 
    { 
     console.log("%o finished loading", this); 
     //Set mouseover/mouseout event here 
    }; 

    img.src = 'image.png', 'image2.png', 'image3.png'; // i realized that i have no idea how to add more images 
}); 

Answer 1

난 당신이 동적으로 데이터베이스 또는 당신이보고있는 문서에 관련된 배열을 전달하여 중 하나를 사용하여 자바 스크립트로 이미지의 배열을 공급하는 것이 좋습니다 것입니다. 이 같은 문서에서 호출 한 후

var BuildImages = function(imgs) 
{ 
    for(var i = 0; i < imgs.length; i++) 
    { 
    var img = document.createElement('img'); 

    img.load(function(e) 
    { 
     console.log("%o finished loading", this); 
     //Set mouseover/mouseout event here 
    }); 

    img.src = imgs[i]; 
    } 
} 

을 그리고 :

$(document).ready(BuildImages(new Array('image.png', 'image2.png', 'image3.png'))); 

//// UPDATE

var buildImages = function(divsclassname, imgs) 
{ 
    var i = 0; 
    // Loop through all divs with the class name you pass into this function 
    $('.'+divsclassname).each(function(e) 
    { 
    // Check for has-image 
    if(!$(this).hasClass('has-image')) 
    { 
     // If not found then set the background image and add class 
     $(this).css('background-image', imags[i]).addClass('has-image'); 
    } 
    i++; 
    }); 
} 

을 여전히

그래서 당신은 다음과 같은 기능을 사용할 수 있습니다 div의 클래스 이름을 설정하는 것과 동일한 방식으로 함수를 호출하십시오.

$(document).ready(function(e) 
{ 
    // Define your images in an array 
    var images = new Array('image.png', 'image2.png', 'image3.png'); 

    // pas in the images and the classname of the divs you want to have bg images 
    buildImages('yourdivsclassname', images)); 
});