Nivoslider가 이미지를 미리로드하는 방법을 제어하려면 어떻게해야합니까?

Question

저는 현재 홈페이지에서 일련의 사진을 보여주기 위해 우수한 Nivoslider 플러그인을 사용하고 있습니다. 모든 것이 정상적으로 작동하지만 각 사진은 페이지 무게에 약 150K를 더합니다. 나는 실제로 약 10 "슬라이드"를 선보이고 싶지만이 모든 이미지는 페이지가 열릴 때 미리로드되기 때문에 곧 페이지 가중치가 너무 커지게됩니다. 특히 많은 사용자가 "쇼"를 기다리지 않을 것입니다. 끝내기 위해.

이 아닌 경우 프리로드 이미지 또는 beter 만 x 이미지가 앞으로 나오는지 궁금합니다. 나는 문서에서 그것에 관해서 아무 것도 찾을 수 없기 때문에 그것이 기본적으로 지원되지 않는다고 추정한다. 어떤 아이디어?

Answer 1

나는 비슷한 솔루션을 찾고 있었어요. 슬라이드 쇼 플러그인을 사용하여 홈 페이지에 12 개의 고화질 이미지를로드하는 웹 사이트의 이미지 갤러리가 있습니다. 그리고이 모든 이미지는 한 번에 페이지 무게에 2-3 meg를 추가하여로드됩니다. 주사위가 없다.

Nivo는 브라우저까지 이미지 처리를 떠납니다. <img src="..."> 태그를 읽은 다음 매끄러운 전환 효과로 이미지를 슬라이드 쇼에 집어 넣습니다. 이미지로드 또는 미리로드를 제어하는 ​​코드에는 아무 것도 없습니다.

다행히도 Nivo는 Github에 있습니다.

https://github.com/leepowers/Nivo-Slider

사용법은 동일 : 그래서 이미지의 게으른로드를 지원하는 데 포크. HTML로 하나의 작은 변화

<div id="slider"> 
<img src="my-large-image.jpg" alt=""> 
<img src="my-large-image2.jpg" alt=""> 
<img src="another-biggun.jpg" alt=""> 
</div> 

변경 이미지 data-src 속성에 src 속성 : data-src 이후

<div id="slider"> 
<img data-src="my-large-image.jpg" alt=""> 
<img data-src="my-large-image2.jpg" alt=""> 
<img data-src="another-biggun.jpg" alt=""> 
</div> 

는 NIVO는 사용할 준비가 될 때까지 이미지가로드되지 않습니다 해석되지 않습니다. data-src은 src보다 우선합니다. 즉, 자바 스크립트가 아닌 사용자의 경우 src에 저해상도 버전을 지정하거나 src에 스페이서 이미지를 채워 HTML이 유효성 검사기를 통과하도록 할 수 있습니다.

그것을 확인하십시오! 몇 가지 프로젝트에서 구현하고 있습니다. 여기에서 데모를 볼 수 있습니다 : http://powers1.net/files/nivo/demo/demo-lazy.html

Answer 2

페이지가로드 될 때까지 #slider을 숨기고 div를로드 할 수 있습니다. CSS 파일의 #slider에

1. 추가] display:none;. 이가되도록

2. , 기존의 코드와 함께 당신의 $(window).load(function() {..});에 $('#slider').css('display','block');을 추가

   $(window).load(function() { 
       $('#slider').css('display','block'); 
   }); 
   

Answer 3

당신이 배열에 이미지를 넣고 미리로드하는 함수를 만들 수 있습니다

jQuery.preloadImages = function() { 
for(var i = 0; i<arguments.length; i++) 
{ 
     jQuery("<img>").attr("src", arguments[i]); 
} 

}

그리고이 기능을 사용하려면 다음을 제공하십시오. 이미지 URL 배열 :

$.preloadImages("test.png", "/imageUrl"); 

Answer 4

기본적으로 페이지로드시 슬라이더를 이미지의 하위 집합으로 초기화합니다. 그런 다음 jQuery를 사용하여 동적으로 이미지를 만들고 슬라이더를 다시 초기화 하시겠습니까? ajax 호출을 사용하는 예제는 다음을 참조하십시오.

Nivoslider update or restart or even destroy

Answer 5

NIVO 슬라이더 화상 프리 로더 없다. 슬라이더를 jQuery로드 이벤트와 함께 사용하는 경우 (nivo 데모 에서처럼) nivo 슬라이더는 모든 이미지가 페이지에로드 될 때까지 대기합니다.

$(window).load(function() { 
     $('#slider').nivoSlider(); 
}); 

모든 이미지는 아래와 같은 문서를 준비 이벤트를 선호 할 수도로드 될 때까지 기다리지 않으려면

. 이미지가 사전로드되지 않습니다.

$(document).ready(function() { 
    $('#slider').nivoSlider(); 
}); 

제어 된 사전로드가 필요한 경우; jQuery와 같은 이미지 미리로드 플러그인 중 하나를 사용할 수 있습니다. http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() { 
    $('#slider').nivoSlider(); 
    //Before starting the slider preload your images then start your slider. 
    $.imgpreload(['/images/a.gif','/images/b.gif'], 
    { 
    all: function() 
    { 
     //Start slider here 
    } 
    }); 
}); 

Answer 6

Burak의 대답은 저에게는 좋지만 Safari에서는 작동하지 않습니다. 나는 수정하는 노력이 내 솔루션입니다 :

$(window).ready(function() { 
    $('#slider').nivoSlider(); 

그것은 사파리, IE와 파이어 폭스에서 제대로 작동합니다. 물론 제어 된 예압을 추가 할 수 있습니다.