jQuery.cycle: الصور لا تتحمل في FFOX؟

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

  •  20-09-2019
  •  | 
  •  

سؤال

لاحظت مشكلة في صفحة البداية بسيطة باستخدام JQuery.cycle.

http://www.rynicdesign.com/

مع Firefox (تثبيت Firebug)، لن يتم عرض الصور الدوارة في المرة الأولى التي يتم فيها الوصول إلى الصفحة (بدون ذاكرة التخزين المؤقت - CTRL-F5) حتى الآن سيتم تحميلها بشكل صحيح على الطلبات اللاحقة.

عدم رؤية هذه الحالة مع المتصفحات الأخرى (أي كروم، سفاري).

أي أفكار لماذا؟

(الصفحة صغيرة - ولكن هنا المعلومات ذات الصلة)

    <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;}
هل كانت مفيدة؟

المحلول

لقد رأيت هذه المشكلة قبل (هذه مقتطف إجابتي السابقة جيسرية دورة + صور مرفق فايرفوكس).

المشكلة هي أن فايرفوكس يعمل على إصلاح حجم عنصر IMG مرة واحدة وإلى الأبد عند نقطة تعيين نمط العرض إلى بلا (عند بدء دورة). لذلك إذا لم تكن الصورة قد انتهت من التحميل (والذي ربما لم يكن في طلب الحصول على طلب أولي)، فإن سمات أسلوب طولها وعرضها صغيرة (لست متأكدا من ما يتوافق معه - ربما حجم العنصر النائب في صورة Firefox ، على الرغم من أنه في حالتك تأتي 164 × 16 بكسل).

على الطلبات اللاحقة، يعرف فايرفوكس أبعادهم لأنها في ذاكرة التخزين المؤقت (أنا أظن قليلا هنا: ربما أحملها فقط قبل أن يتم تعيين الدورة display: none).

يمكنك حل هذا عن طريق تحديد الخاص بك middle حجم div مقدما:

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

(أي، طالما أنك لا تفعل أي شيء معقدة مع صورك - يكون موقع الويب الخاص بي يعمل بشكل حيوي من الصور ذات الحجم المختلفة لذلك اضطررت إلى أداء عمل إضافي.)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top