jquery.cycle : 이미지가 ffox에서로드되지 않습니까?

StackOverflow https://stackoverflow.com/questions/2049491

  •  20-09-2019
  •  | 
  •  

문제

jquery.cycle을 사용하여 간단한 스플래시 페이지에 문제가 있음을 알았습니다.

http://www.rynicdesign.com/

Firefox (Firebug가 설치)를 사용하면 회전 이미지가 처음으로 액세스 할 때 (캐시 -Ctrl -F5없이)에 처음으로 액세스 할 수는 없지만 후속 요청에서 올바르게로드됩니다.

다른 브라우저 (예 : Chrome, Safari) 로이 상태를 보지 못합니다.

왜 아이디어가 있습니까?

(페이지는 작지만 여기에 관련 정보가 있습니다)

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css&amp;2.8.0r4/build/base/base-min.css" />
    <link rel="stylesheet" type="text/css" href="/templates/splash/css/splash.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.73.js"></script>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    $(document).ready(function() {
        $('.middle').cycle({
            fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            autostop: 1,
            timeout: 2500 // milliseconds between slide transitions (0 to disable auto advance)
        });
    });

    //--><!]]></script>
  </head>
  <body id="page">
    <div id="doc4" class="main-frame">
    <div class="top"></div>
    <div class="middle" align="center">
        <img src="/templates/splash/images/rynic-design.gif" alt="Welcome to RYNiC Designs" />
        <a href="/about"><img src="/templates/splash/images/enter.gif" alt="click to enter website" /></a>
    </div>
    <div class="bottom"></div>
    </div>
  </body>
</html>

그리고 여기에 splash.css가 있습니다

html, body, #page, #doc4 {height:100%;margin:auto;}

.top, .middle, .bottom {clear:both;overflow:auto;display:block;}
.middle {background-color:#ffffff;overflow:hidden;}
.top, .bottom {height:35%;}

.top {background: #ffffff url(/templates/splash/images/left-bg.gif) repeat-y scroll top left;}
.bottom {background: transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll top right;}

#doc4 {background:transparent url(/templates/splash/images/right-bg.gif) repeat-y scroll right bottom;}
도움이 되었습니까?

해결책

나는이 문제를 전에 본 것입니다 (이것은 나의 이전 답변의 발췌입니다. jQuery Cycle + Firefox Squishing 이미지).

문제는 Firefox가 IMG 요소의 크기를 한 번에 수정한다는 것입니다. 시점에서 디스플레이 스타일이 없음으로 설정됩니다. (사이클을 시작할 때). 따라서 이미지가로드가 완료되지 않은 경우 (아마도 초기 GET 요청에 있지 않은 경우) 높이와 너비 스타일 속성은 작습니다 (아마도 그들이 무엇에 해당하는지 확실하지 않습니다 - 아마도 Firefox의 이미지 자리 표시기의 크기 일 것입니다. , 당신의 경우에는 164 x 16 픽셀이 나타납니다).

후속 요청에서 Firefox는 캐시에 있기 때문에 차원을 알고 있습니다 (여기에 조금 추측 할 것입니다 : 아마도 사이클이 설정되기 전에로드 할 수 있습니다. display: none).

당신은 당신의 것을 지정하여 이것을 해결할 수 있습니다 middle Div의 크기 미리 :

#middle {
    width:  974px;
    height: 110px;
}

(즉, 이미지로 복잡한 일을하지 않는 한 내 웹 사이트는 다양한 크기의 이미지를 동적으로로드하여 추가 풋워크를 수행해야했습니다.)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top