요소의 src 속성이 변경되어 수정 된 요소가로드시 처음 렌더링됩니다.

Question

서버 측 제한 때문에 웹 사이트의 일부 이미지를 자바 스크립트를 사용하여 대체하므로 페이지를로드 할 때 가장 먼저 볼 수 있습니다 .

나는 Changing src of dynamically loaded images with jquery과 jQuery - Replace main image source with dynamic image source을 보았지만 직접적인 관련이 없습니다.

아래 코드에서 문제는 첫 번째 이미지가 먼저 표시되고 두 번째 이미지가 표시되는 반면 원하는 결과는 두 번째 이미지가로드 될 때 표시된다는 것입니다.

소스 코드에서이 스크립트는 탐색 바로 아래에 추가됩니다.이 스크립트는 탐색 할 모든 그림 위에 있습니다. 그들은 교체 전까지는 파일에 HTML을 변경할 수없는 경우

가 //이는 우 사이드 바

function changeButtons(){ 
var images = $("#rightcolumn img"); 
var imageSrc; 
var loginName = "login.gif"; 
var logoutName = "logout.gif"; 
var onlineOrdersName = "myonlineorder.gif"; 
var basketName = "basket.gif"; 
var checkoutName = "checkout.gif"; 
var checkoutOffName = "checkout_off.gif"; 

images.each(function(){ 

imageSrc = ($(this).attr("src")); 
    varsrcnew = ""; 

    if(imageSrc.indexOf(loginName) >= 0) 
    { 
    srcnew = "pathToFile/login_new.png"; 
    $(this).attr("src", srcnew)  
    } 
    else if(imageSrc.indexOf(logoutName) >= 0) 
    { 
     srcnew = "pathToFile/logout_new.png"; 
    $(this).attr("src", srcnew) 

    } 

    ... 
    ... 
    ... 


}); 
} 

document.addEventListener('DOMContentLoaded', function() { 
    changeButtons(); 
}); 

</script> 

Answer 1

의 이미지를 대체, 당신은 이미지를 숨길 수 있습니다. 당신이 스타일 시트에 액세스 할 수없는 경우 자신의 (head에) 만들 수

#rightcolumn img { 
    visibility: hidden; 
} 

:

$('head').append('<style>#rightcolumn img {visibility: hidden;}</style>'); 

는 그 다음 src의 교체

처음에는

는 CSS와 이미지를 숨길 자바 스크립트 사용 :

$(document).ready(function() { 
    var $images = $("#rightcolumn img");    
    $images.each(function (idx, img) { 
     var imgPath = img.src.split('/'), 
      imgName = imgPath.pop(); 
     imgName = imgName.split('.'); 
     $(img).load(function() { 
      $(this).css('visibility', 'visible'); 
     }); 
     img.src = imgPath.join('/') + '/' + imgName[0] + '_new.' + imgName[1]; 
    }); 
});