jquery를 사용하여 HTML 페이지에서 수백 개의 이미지를 자동으로 업데이트하려면 어떻게합니까?

HTML 페이지를 다운로드 한 후 30 초마다 많은 이미지를 새로 고치려는 HTML 페이지가 있습니다. Jquery와 단일 이미지로이 작업을 수행하는 방법을 알고 있지만 약 200 개의 맞춤 URL을 사용하여 200 개가 넘는 이미지에 표시 할 현재 이미지를 결정하고 싶습니다. 나는 jquery가 각각의 이미지와 관련된 커스텀 url을 호출하여 필요한 이미지에 대한 URL을 다운로드하고, 변경 될 때 페이지의 이미지를 업데이트하도록하는 효율적인 방법을 찾아야한다.jquery를 사용하여 HTML 페이지에서 수백 개의 이미지를 자동으로 업데이트하려면 어떻게합니까?

사용자 지정 URL을 보여주는 현재 하이퍼 링크 예제입니다.

<A href="/urlThatReturnsCurrentImageURL/1234/4567">link to url for image</A>

각 사용자 정의 URL이 같은 이미지 태그 (또는 JQuery와이 간단하게 다른 텍스트)

<img src="/static/someImage.jpg">

를 반환 무엇 JQuery와 각각에 대한 사용자 정의 URL을 호출해야하는 가장 간단한 방법은 이미지 URL, 이미지 html 또는 jquery가 30 초마다 올바른 이미지를 다운로드하는 데 사용할 수있는 기타 텍스트를 다운로드 할 수 있습니까? 한 페이지에 약 200 개가 있습니다.

출처

2010-05-30 Chris

한 가지 방법은 각 링크에 대해 DIV를 만들고 URL에서 DIV ID를 호출하도록하는 것입니다. 그런 다음 각 DIV를 같은 클래스의 일부로 만들면 해당 클래스의 DIV를 반복하고 각 URL을 호출 할 수 있습니다. 할

   <div id='true.txt' class='isSolvedImage'> 
        <img src="_images/solved.png"> 
       </div> 

       <div id='false.txt' class='isSolvedImage'> 
        <img src="_images/solved.png"> 
       </div> 

    <script src="jquery-1.4.2.min.js" type="text/javascript"> </script>    
    <script type="text/javascript"> 
    $('img').hide(); 
    function updateImages() { 
        var getDivs = 0; 
        //iterate div with class isSolvedImage 
        $("div.isSolvedImage").each(function() { 
         var img = $(this).find('img'); 
         // send ajax requrest 
         $.get(this.id, function(data) {  
          if(data == 1){ 
           img.show(); 
          } 
          else{ 
           img.hide(); 
          } 
         }); 
         }); 
       } 
    setInterval("updateImages()", 30000); 
    </script>

출처

2010-06-03 05:08:45 Chris

모든 URL을 한 번에 반환하는 서버 측에서 도우미를 만듭니다. 그런 다음 반환 된 객체의 각 이미지를 조회 할 수 있습니다 (JSON을 사용하는 것이 좋습니다).

출처

2010-05-30 14:10:11 Marian

접근 방식의 주된 목적 중 하나는 URL의 결과를 한꺼번에 결정하지 않고 각 URL에 대한 올바른 이미지를 결정하기 위해 자바 스크립트가 다시 호출 할 때 각각 개별적으로 실행하는 것입니다. – Chris

이유를 모르겠습니다. 30 초마다 모든 이미지를 바꿔야하므로 한 번에 200 개의 요청을 한 번에 실행해야하는 이유는 무엇입니까? 하지만 200 개의 요청이 확실히 필요하다면 효율적인 방법이 없습니다.) – Marian

할 수 있습니다 루프 이미지

$ (문서) .ready (함수() {

setTimeout(function(){ 

    $('img .reloadable').each(function(){ 
     orginal = $(this).attr('src'); 

     if(original.indexOf('?') == -1) 
     { 
      original = original + '?' + Math.random(); 
     }else if(original.indexOf('&') == -1) 
     { 
      original = original + '&t=' + Math.random(); 
     } 
     $(this).attr('src',original); 
    }) 

},30000) // 30 seconds

})

받는 사람의 다양한으로 새로운 URI를 생성하여 임의 사용 이전 버전이므로 dom은 현재 캐싱되지 않은 상태로 다시로드됩니다!

출처

2010-05-30 14:13:38 RobertPitt

가장 간단한 것은 단지 전체 페이지 새로 고침을 사용하는 것입니다 :

<meta http-equiv="refresh" content="60" />

당신은 단지 ID를 지정하여 개별 요소를 새로 고침 같은 코드를 사용할 수 있습니다. 이것은 페이지의 프런트 엔드에서 업데이트하는 것이 가장 쉬운 해결책 일 것입니다.

출처

2014-06-05 02:44:01

jquery를 사용하여 HTML 페이지에서 수백 개의 이미지를 자동으로 업데이트하려면 어떻게합니까?

답변

관련 문제