하나의 img 태그에 두 개의 이미지를 차례로로드하십시오.

Question

두 개의 이미지를 하나의 <img /> 태그에로드하려고합니다. 첫 번째 작은 이미지는 src 속성으로 표시되고 두 번째 큰 이미지는 data-src 속성 안에 있지만 한 이미지는 한 번에 표시됩니다 (src 속성에 있음). 페이지로드가 작은 이미지가로드되어 처음 표시 될 때 배경에서 큰 이미지로드를 완료하면 작은 이미지로 바뀌므로 큰 이미지를 볼 수 있습니다. data-src 속성에서 큰 이미지를 취하고 src 속성에 큰 이미지를 배치하는 코드가 있습니다.

$(document).ready(function(){ 
    $("#image4").load(function(){ 
     var imgDefer = document.getElementsByTagName('img'); 
     for (var i=0; i<imgDefer.length; i++) { 
      if(imgDefer[i].getAttribute('data-src')) { 
       imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src')); 
      } } 
    }); 
}); 

내가 대신 내가 먼저 작은 이미지를보고 싶어, 나는 큰 이미지를로드하는 데 시간이 오래 기다릴 싶지 않기 때문에이 작업을 수행 할 수. 페이지로드시 작은 크기와 큰 크기의 이미지를 동시에로드 할 때 문제가 발생합니다. 정보를 얻으려면 이미지에 드래그 및 확대/축소 기능이 있습니다. 현재 라이브 코드는 여기에 있습니다 : http://virtualepark.com/new1/demo.html

Answer 1

여기에 게시 한 코드가 서버에 배포되어 있지 않습니다. mousewheel -event를 사용하는 다른 것들이 있습니다.

//get all images 
$('img').each(function(i, img) { 
var img = $(img); 
//if they have a data-src 
if(img.attr('data-src')) { 
    //register for the load-event for the initial image 
    img.one('load', function() { 
    //if small image is loaded, begin loading the big image 
    //create new hidden image 
    var hiddenImg = new Image(); 
    hiddenImg.onload = function() { 
      //if the hidden image is loaded, set the src-attribute of the 
      //real image (it will show instantly) 
      img.attr('src', img.attr('data-src')); 
     }; 
     //trigger loading of the resource 
     hiddenImg.src = img.attr('data-src'); 
    }); 
    }); 
}); 

(Load image from url and draw to HTML5 Canvas 학점)

Answer 2

당신이 숨겨진 태그 이후로드 할 수 있습니다

는 백그라운드에서와로드하면 숨겨진 큰 이미지를로드 해보십시오, 눈에 보이는 이미지의 URL을 설정 로드 완료가 변경됩니다.

Answer 3

이미지가로드 된 후로드를 시작하려고 할 수 있습니다.

$('img').load(function(){ 
    var bigImgSrc = $(this).data('src'); 
    var img = $(this); 

    if(bigImgSrc != img.prop('src')){ 
     var bigImg =$('<img>').prop('src', bigImgSrc); 
     bigImg.load(function(){ 
     img.prop('src', bigImgSrc); 
     }); 
    } 
}); 

나는 당신이 DOM에 bigImg를 추가 할 필요하거나이 같은로드하는 경우가 아닌 경우 100 % 확신한다. DOM에 추가해야하는 경우 bigImg.hide().appendTo('body')을 사용한 다음로드 할 때 제거 기능을 사용하십시오.

는 또한,로드 기능은 모든 경우에 작동하지 않을 수 있음을 인식 할 것을 이전에 무한 루프에 있던 https://api.jquery.com/load-event/

편집을 볼 수 있습니다. 코드 예