JQuery Cycle Plugin, Webkit Browers 및 이미지의 문제점

애니메이션 GIF 대신 JQuery를 사용하여 애니메이션 배너를 만들려고합니다. Cycle Plugin은 FireFox에서이 우물을 실행하지만 Safari와 Chrome에서는 페이지를 처음로드 할 때 "슬라이드 쇼"를 보지 않고 단일 이미지 만 볼 수 있습니다. 나는이 .load()를 통해 이미지를 미리로드하고 display : hidden을 사용하여 후속 이미지에 각각 숨기려고 시도했다. 흥미롭게도,로드되는 단일 이미지가 실제로 모든 이미지의 가장 작은 이미지 (파일 크기)라는 것을 알았습니다.JQuery Cycle Plugin, Webkit Browers 및 이미지의 문제점

모든 의견을 환영합니다. 나는 곤두박질 친다.

jQuery(document).ready(function() { 
    $('#banner').cycle({ 
     fx: 'none', 
    delay: 0, 
    speed: 500, 
    autostop: true, 
     autostopCount: 8, 
timeoutFn: function(currElement, nextElement, opts, isForward) { 
      opts.myTimeoutCount = (opts.myTimeoutCount + 1) % opts.myTimeouts.length; 
      return opts.myTimeouts[opts.myTimeoutCount]; 
    }, 
    myTimeouts: [1000,1000,500,500,500,2000,2000,1000], 
    myTimeoutCount: 0 
    }); 
}); 


<div id="banner"> 
    <img src="images/if_300x250_banner_1.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_2.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_3.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_4.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_5.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_6.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_7.gif" width="300" height="250" /> 
    <img src="images/if_300x250_banner_8.gif" width="300" height="250" />

출처

2011-08-05 touchoftech

각 이미지를 반복하면서 현재 이미지를 진행중인 이미지로 바꾸시겠습니까? – RobB

예, 정확히 내가하려고하는 일입니다. 그러나 각 이미지가 표시되는 시간을 제어 할 수 있어야하므로 TimeoutFN 함수가 필요합니다. – touchoftech

지속성이 떨어져 지불한다. 문제는 JQuery, Cycle Plugin 또는 Webkit 브라우저가 아니라 이미지가있는 것으로 나타났습니다. gif를 만들 때 사용한 소스 PSD는 애니메이션 타임 라인에서 Photoshop 레이어를 유지했으며 Photoshop에서 "Save for Web & Devices"를 사용할 때 데이터가 포함되어 Firefox에서 문제가되지 않았다는 점에 흥미 롭습니다. 해결책은 단순히 애니메이션 팔레트에서 "애니메이션 삭제"를 선택하고 gif를 한 번 더 저장하는 것입니다.

누구나이 점에 대해 고마워했습니다.

출처

2011-08-06 07:48:14 touchoftech

JQuery Cycle Plugin, Webkit Browers 및 이미지의 문제점

답변

관련 문제