2012-11-27 2 views
2

처음에는 로더 이미지 태그가 포함 된 div가 있습니다.DIV의 내용이 이미지인지 확인하십시오.

<img src="/images/indicator_big.gif" style="display:block;margin:auto"> 

은 내가 DIV 다음 함수가 Ajax 요청을 트리거해야만을 로더 이미지가 들어 있는지 확인하고 싶습니다.

내가 div.innerHTML과 같은 몇 가지 작업을 수행하면 문자열로 처리됩니다.

innerHTML이 로더 이미지 일 경우 가장 좋은 방법은 무엇입니까?

+0

jQuery 또는 다른 라이브러리를 사용하고 있습니까? – andlrc

+1

AJAX 요청을 할 필요가 있는지 여부를 결정하기 위해 div의 내용에 의존해서는 안됩니다. 대신에 확인할 수있는 부울 변수 isLoaded를 갖는 것이 낫지 않습니까? –

+2

이 이미지는 처리가로드되는지 여부를 표시하는 용도로만 사용됩니까? 대신에'loading' 클래스를 DIV에 첨부하고 그 클래스의 존재를 테스트하는 것이 더 쉬울 수도 있습니다. – sargant

답변

1

이 방법은 당신이 무엇을 물어 할 것입니다.

function hasOnlyImg(div) { 
    if (div.children.length != 1) 
    return false; 
    return div.children[0].tagName == "IMG"; 
} 
+0

일부 브라우저는'tagName'을 소문자로 출력하므로 조정할 수 있습니다. – peirix

1

당신은 당신의 요소

var children = document.querySelector("#yourDiv > *"); 
if (children.length == 1 && children[0].tagName.toLowerCase() == "img") { 
    //you only have one child in here, and that's an image 
} 

내부 그것은 단지 당신의 초기 이미지가 포함 된 경우이 1됩니다 얼마나 많은 요소를 확인할 수 있습니다.

하지만, 브라우저 지원의주의하십시오 : 나는 일반적인 접근 방식은 정직하게하는 가장 좋은 모르겠어요하지만 http://www.quirksmode.org/dom/w3c_core.html#t13

+0

정말로 내부에있는 이미지라는 체크를 덧붙여 야합니다 ... –

0

로더 이미지의 'style.display'가 변경된다고 가정합니다. 그걸 확인해도 될까요? 이 도움이

var allDivTags = mydiv.getElementsByTagName("*"); 
if (allDivTags.length == 1 && allDivTags.nodeName.toLowerCase() == "img") { 
    //only 1 html element exists in the div, and it's an image. 
    //run code 
} 

희망 : 여전히 DIV 내에서 HTML 태그의 수를 확인하려는 경우

function checkDiv(div,func) { 
    var thisDiv = div; 
    var imgLink = thisDiv.getElementsByTagName("img"); 
    if (imgLink.length == 1 && imgLink[0].style.display !== "block") { 
     func(); 
    } 
} 
checkDiv(document.getElementById("mydiv"),function() { 
    //call ajax code 
}); 

가 아니면, 그냥 그런 짓을.

관련 문제