제어 이미지가 자바 스크립트/jquery에로드 중입니까?

Question

나는 이미지 갤러리를 만드는 오전 그리고 난 다음 버튼을 클릭하면 몇 가지 이미지를로드 할 ..... 예를 들어
,

$("#next").css({cursor:"pointer"}).click(function(){ 
      //load image1,image2,image3 
     }); 

HTML

<img src="image1.jpg"><img src="image2.jpg"><img src="image3.jpg"> 

내가 돈 이 이미지 태그는 이미 'gallery'div 태그에 있습니다. 페이지가 처음로드 될 때로드하지 못하도록하고 다음 버튼 이미지를 클릭하면 이미지를로드 할 수 있습니다. 로드 ... 감사합니다

Answer 1

이미지 요소를 마크 업에 이미, 그들은 페이지가로드를 시작할 때 정의 된 src 속성, 이미지 파일이 다운로드됩니다 경우.

프로그래밍 방식으로 이미지 요소를 만들거나 태그에 src 특성을 비워두고 다음을 클릭 할 때 할당해야합니다.

옵션 1 :

// on the click event... 
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'], 
    gallery = $('#gallery'); 
$.each(images, function() { 
    $('<img/>').attr('src', this).appendTo(gallery); 
}); 

옵션 2 :

마크 업 :

$('#img1').attr('src', 'image1.jpg'); 
$('#img2').attr('src', 'image2.jpg'); 
$('#img3').attr('src', 'image3.jpg'); 

편집 : 클릭 이벤트에

<img id="img1"/> <img id="img2"/> <img id="img3"/> 

게으른로드에 대해 이야기 할 때 또 다른 옵션이 있습니다.

옵션 3 :

당신은 이미지의 src 속성을 제거하고 클릭 이벤트에 다음의 $.data 기능을 사용하여 저장할 수, 예를 들어, 원래 값으로 이미지 SRC를 복원

$(function() { 
    // put a "defaultImage" on all images of gallery 
    // and store the original src attribute 
    $('#gallery img').each(function() { 
    $(this).data('originalSrc', $(this).src).attr('src', 'defaultImage.jpg'); 
    }); 

    $("#next").click(function(){ 
    $('#gallery img').each(function() { 
     // restore the original src attribute: 
     $(this).attr('src', $(this).data('originalSrc')); 
    }); 
    }); 
}); 

Answer 2

img 요소를 만들고이를 DOM에 추가하십시오.

var img = $(document.createElement("img")); 
img.attribute("src", "image1.jpg"); 
$("#mydiv").append(img);