![]()
window을 하지 않고 합니다.
사용자가 스크롤할 때 동적으로 이미지를 로드하는 매우 긴 페이지가 있습니다.
다만, 유저가 페이지의 특정 부분에서 빠르게 스크롤 해 버리면, 그 페이지의 보이지 않는 부분에 이미지가 계속 로드되는 것을 원하지 않습니다.
페이지에는 이미지 로딩 이외에도 많은 요구가 동시에 발생하기 때문에 스크롤 이벤트에서 무뚝뚝한 window.stop()을 실행하는 것은 허용되지 않습니다.
표시되지 않게 된 이미지의 img src Atribute를 삭제하고 클리어하려고 했지만 이미 요구가 시작되었기 때문에 이미지 로드는 계속됩니다.
사용자가 페이지의 해당 부분을 짧게 스크롤할 때 이미지 src가 채워진 점에 유의하십시오.그래도 한번 지나갔을 때는 window.stop()을 사용하지 않으면 로드를 정지할 수 없었습니다.src를 지우지 않았습니다.( Chrome & FF )
비슷한 투고가 가까워졌지만 이 문제를 해결하지 못하는 것 같습니다.
당신이 하려고 하는 것은 nrabinovitz가 언급한 바와 같이 잘못된 접근법입니다.이미지 로드 프로세스를 단순히 "취소"할 수는 없습니다(설정).src빈 문자열의 속성은 권장되지 않습니다).실제로 그렇게 할 수 있다고 해도 서버에서는 취소되는 데이터가 계속 전송되어 부하율이 높아지고 속도가 느려지기 때문에 상황이 악화될 뿐입니다.또한 다음 사항을 고려하십시오.
- 사용자가 페이지를 빠르게 위아래로 스크롤하면 로드 지연이 발생합니다.
- 페이지의 일부 로드를 시작하기 전에 타임아웃 지연(예: 200밀리초)이 있는 것은 허용됩니다.페이지에서 200밀리초 간격으로 정지하고 점프하는 횟수는 몇 번입니까?그 일이 일어나더라도, 1번 지점으로 돌아온다.
- 당신의 이미지는 얼마나 큰가요?느린 서버라도 초당 약 수십 개의 3Kb Thunbnails를 처리할 수 있습니다.사이트의 이미지가 큰 경우는, Light Box등의 컴포넌트와 함께 저해상도 및 고해상도 이미지를 사용하는 것을 검토해 주세요.
종종 컴퓨터 문제는 단순한 설계상의 문제입니다.
** 편집 **
아이디어는 다음과 같습니다.
에는 「이렇게 하다」라고 표시되어 있을 것입니다.
DIV예상되는 이미지 크기의 너비와 높이를 가진 컨테이너(CSS를 사용하여 스타일링). ★★의DIV링크를 추가합니다.예를 들어 다음과 같습니다.<div class="img-wrapper thumbnail"> <a href="http://www.domain.com/path/to/image">Loading...</a> </div>이 Javascript 추가(테스트되지 않은 아이디어 자체 설명)
$(function() { var imgStack; var loadTimeout; $(window).scroll(function() { imgStack = null; if (loadTimeout) clearTimeout(loadTimeout); loadTimeout = setTimeout(function() { // get all links visible in the view port // should be an array or jQuery object imgStack = ... loadNextImage(); }, 200); // 200 ms delay }); function loadNextImage() { if (imgStack && imgStack.length) { var nextLink = $(imgStack.pop()); // get next image element $('<img />').attr('src', nextLink.attr('href')) .appendTo(nextLink.parent()) .load(function() { loadNextImage(); }); // remove link from container (so we don't precess it twice) nextLink.remove(); } }; });
제 생각은요
1) 이미지에 대한 AJAX 요구를 시작합니다.이미지가 성공하면 이미지는 브라우저 캐시로 이동하며, "src" 속성을 설정하면 이미지가 캐시에서 표시됩니다.
2) XHR을 중단할 수 있습니다.
큰 이미지 다운로드(실제로 20초만 기다리면 이미지가 반환됨)를 에뮬레이션한 작은 서버를 작성했습니다.그리고 HTML에 다음과 같은 내용이 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 469px;
height: 428px;
background-color: #CCC;
border: 1px solid #999;
}
</style>
</head>
<body>
<img data-src="./img" src="" />
<br />
<a id="cancel" href="javascript:void(0)">CANCEL</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var xhr, img = $('img'), src = img.data('src');
xhr = $.ajax(src, {
success: function (data) { img.attr('src', src) }
});
$('#cancel').click(function (){
xhr.abort();
})
});
</script>
</body>
</html>
이미지를 로드하려면 ajax 콜을 사용합니다.또, 가 스크롤 아웃을 사용하고 있는 경우는, 콜을 중단할 수 있습니다.
jQuery 유사 코드에서는 다음과 같습니다(구문의 오류를 양해해 주십시오.의
1) 로드하는 이미지에 태그를 붙입니다.
$(".image").each( function(){
if ( is_in_visible_area(this) ) { // check [1] for example
$(this).addClass("load_me");
} else {
$(this).addClass("dont_load");
}
});
2) 이미지 로드
ajax_requests = {};
$(".image.load_me").each( function(){
// load image
var a = $.ajax({
url: 'give_me_photos.php',
data: {img: photo_id},
success: function(html){
photo_by_id(photo_id), img.append(html);
}
});
ajax_requests[photo_id] = a;
});
3) 화면 밖으로 로드 취소
for( id in ajax_requests ) {
if ( ! is_in_visible_area(id) ) {
ajax_requests[id].abort();
}
}
물론 이미지가 이미 로드되었는지 확인하는 기능도 추가합니다(예: 클래스 "loaded")
[1] 스크롤 후 요소가 보이는지 확인
[2] jQuery를 사용하여 Ajax 요청 중단
BTW, 또 다른 아이디어도 효과가 있을 수 있습니다.
1) 새로운 iframe을 만듭니다.
로드를 하는 스크립트가 되면 2) iframe을 합니다..parent의 메서드
3) 3) iframe을 사용하여 합니다..stop
스택을 사용하여 Ajax 요청을 관리합니다(병렬이 아닌 직렬 로딩이 필요하지만 가치가 있음).
스크롤 중지 시 300ms 동안 기다렸다가 뷰 영역 내의 모든 이미지를 스택에 푸시합니다.
사용자가 스크롤할 때마다 스택이 실행 중인지 확인합니다.(fyi - 모든 Ajax 콜을 중지하는 대신 특정 URL에 대한 모든 요청을 중지할 수 있습니다.또한 regex를 사용하여 페이지에서 다른 요청을 중지하지 않도록 할 수도 있습니다.)
기존 스택이 실행 중인 경우 상위 스택을 제외한 해당 스택에 있는 모든 이미지를 팝합니다.
모든 Ajax 콜 - bind before Send() event를 사용하여 특정 이미지를 스택에서 삭제합니다.
지금은 늦었지만, 우리는 직장에서 매우 비슷한 일을 했습니다. 자세한 코드가 필요하시면 알려주세요.
건배!
db(또는 memcached)의 필드를 체크하는 php 스크립트를 통해 이미지를 제공할 수 있습니다.이 스크립트는 로드 중지를 나타냅니다.이 스크립트는 이미지를 청크로 분할하고 각 청크 사이에 일시 중지하여 특정 요청의 중지 플래그가 있는지 확인합니다.설정되어 있는 경우 A 204 콘텐츠 없음 헤더를 전송하면 브라우저가 수신을 정지합니다.
하지만 이건 좀 과한 살인일 수도 있어.
해결책은 웹워커일 수 있습니다.웹워커는 종료하고 그와의 연결을 끊을 수 있습니다.그러나 웹워커가 브라우저의 제한된 연결을 사용하기 때문에 응용 프로그램이 차단된다는 작은 문제가 있습니다.
현재 서비스 워커와 함께 솔루션을 만들고 있습니다.접속 제한은 없습니다(그렇기를 바랍니다).
언급URL : https://stackoverflow.com/questions/6929662/how-do-i-abort-image-img-load-requests-without-using-window-stop
'programing' 카테고리의 다른 글
| ReactJS 구성 요소 이름은 대문자로 시작해야 합니까? (0) | 2023.03.31 |
|---|---|
| javascript 및 Postman을 사용한 JSON 배열 레코드 카운트 (0) | 2023.03.31 |
| 플러그인을 업데이트하려고 할 때 "정의되지 않은 함수 trailingslashit() 호출" wordpress PHP 치명적인 오류 (0) | 2023.03.31 |
| 플럭스+리액트 vs 백본+ 반응 (0) | 2023.03.31 |
| javax.json을 이클립스로 Import하려면 어떻게 해야 하나요? (0) | 2023.03.31 |