동적 이미지 태그

Question

10 개의 다른 폴더에서 이미지 이름을 찾는 태그를 어떻게 만듭니 까? 찾지 못하면 Javascript를 사용하여 자리 표시 자 이미지를 출력합니까?

감사합니다.

Answer 1

나는 그런 스크립트 갈 것입니다 : 다음의 경우,

<img src="folder1/mypicture.gif" onerror="TryDifferentFolder(this);" /> 

이 folder1 먼저 "mypicture.gif"를 검색합니다 : 코드를 실행하는 데

<script type="text/javascript"> 
var arrPossibleImageFolders = ["folder1", "folder2", "folder3"]; 
var strDefaultImage = "nopicture.gif"; 
function TryDifferentFolder(oImage) { 
    var folderIndex = parseInt(oImage.getAttribute("folder_index"), 10); 
    if (isNaN(folderIndex)) 
     folderIndex = 0; 
    folderIndex++; 
    if (folderIndex >= arrPossibleImageFolders.length) { 
     oImage.src = strDefaultImage; 
     return; 
    } 

    var lastSlashIndex = oImage.src.lastIndexOf("/"); 
    var strNewSource = arrPossibleImageFolders[folderIndex] + "/" + oImage.src.substr(lastSlashIndex); 
    oImage.src = strNewSource; 

    oImage.setAttribute("folder_index", folderIndex + ""); 
} 
</script> 

는 다음과 같은 이미지 태그를 찾을 수 없으면 (onerror triggered) folder2 등을 시도하고 마침내 기본 그림을로드합니다.

Answer 2

lol,이 태그는 일부 태그에서만 수행 할 수 있으므로 js (jquery/ajax) 함수를 사용하여 해당 파일을 검색 한 다음 img의 href 속성을 업데이트해야합니다. 그렇지 않으면 사용자의 의도를 조금 더 설명해야합니다

Answer 3

정말, 파일이 실제로있는 서버 측에서 이와 같이해야합니다. 이미지를 찾고 발견 한 것을 보내는 스크립트를 만드십시오.

(나쁜 이후, 내 원래 JS 솔루션을 제거 편집, 다른 사람들이 더 나은 사람을 제안했다.)

Answer 4

var img = new Image(); 
img.onload = function(){ alert("I am loaded"); }; 
img.onerror = function(){ alert("I am not loaded"); }; 
img.src = "/foo/bar.gif"; 

당신의 OnError 얻을 경우, 목록에 다음 이미지로 소스를 다시 설정해보십시오 .

Answer 5

여러 가지 onerror 핸들러를 사용해야 할 수도 있습니다. 일부 이미지를로드하고 후보자가 부족할 때까지 가능한 오류를 잡으십시오. 자리 표시자를 마지막 이미지로로드합니다.

Answer 6

Ajax로 해결할 수 있습니다. 각 이미지를로드하려고 시도합니다. 이미지가 존재한다는 것을 나타내는 200을 얻으면 404 이미지가 다음 이미지를 시도합니다.

<script> 
urlsToTry = ['http://url2.com','http://url3.com','http://you.get.the.picture.com','http://www.google.com/images/logos/ps_logo2.png']; 
</script> 
<img src="http://url1.com" style="display: none;" onload="this.style.display='block';" onerror="if(urlsToTry.length) { this.src = urlsToTry.shift(); } else { alert('none of the urls worked!'); }"> 

당신은 여기의 예를 볼 수 있습니다 당신은 내가 직접하지 않을 거라고하지만, 내가 해결책을 보여주지 태그와 함께 작업을 수행하는 방법에 대한

var images = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg']; 
var imageExists = false; 
for(var i = 0; i < images.length; i++){ 
    if(!imageExists){ 
    $.ajax({ 
     url: images[i], 
     async: false, 
     success: function(){ 
     // use images[i] as your image 
     imageExists = true; 
     } 
    }); 
    } 
} 
if(!imageExists) { 
    // use default image 
} 

Answer 7

을 요구하고 있기 때문에 : http://jsfiddle.net/LLQLH/1/

이 접근법의 단점 중 하나는 그림을 연속적으로로드하려고 시도하는 것이므로 모두 실패하면 상당히 기다릴 수 있습니다.

<script> 
var loadQueue={}; 
var urlsToTry = ['http://url1.com','http://url2.com','http://url3.com','http://you.get.the.picture.com']; 

function showTag(url) { 
    var tag = document.getElementById('myimage'); 
    if(url) tag.src = url; 
    tag.style.display='inline-block';  
} 

function onLoadEventHandler(url) { 
    return function() { 
     delete loadQueue[url]; 
     for(var i = 0, img; img = loadQueue[i]; i++) { 
      img.onload = null; 
     } 
     loadQueue = null; 
     showTag(this.src); 
    } 
} 

function onErrorEventHandler(url) { 
    return function() { 
     delete loadQueue[url]; 
     for(var i in loadQueue) return; 
     showTag(); //we will only get here if loadQueue is empty 
    } 
} 

for(var i = 0, url; url = urlsToTry[i]; i++) { 
    loadQueue[url] = new Image(); 
    loadQueue[url].onload = onLoadEventHandler; 
    loadQueue[url].onerror = onErrorEventHandler(url); 
    loadQueue[url].src = url; 
} 
</script> 
<img id="myimage" src="http://www.google.com/images/logos/ps_logo2.png" style="display: none;"> 

당신이있어 작업을 볼 수 있습니다 : http://jsfiddle.net/DJ2SH/