لماذا يعمل رمز تغيير حجم صورة jQuery الخاص بي بشكل متقطع فقط؟

Question

أول منشور.لقد بحثت كثيرًا عن أسئلة مماثلة وخرجت خالي الوفاض، لذا إليك ما يلي.

أستخدم حاليًا جزءًا صغيرًا من jQuery لقياس مجموعة من الصور بشكل متناسب لعرضها في دائرة صور (بفضل مستخدمي SO على الكثير من هذا الرمز).يتم تشغيل الرف الدائري بواسطة البرنامج المساعد jCarousel Lite (هنا).لدي 4 مجموعات صور مختلفة، والتي تم تحديدها باستخدام قائمة التنقل.عند تحديد مجموعة صور جديدة، يتم تنفيذ تعليمات تغيير الحجم jQuery التالية على كل صورة في المجموعة، ثم تتم تهيئة دائرة الصور باستخدام الصور التي تم تغيير حجمها حديثًا داخل #slider div.

المشكلة:هذا الرمز يعمل فقط في بعض الأحيان، على ما يبدو بشكل عشوائي.عند تهيئة شريط التمرير، إذا لم يتم تغيير حجم الصور بنجاح، تتم زيادة جميع العروض إلى الحد الأقصى للعرض، وبالتالي يتم اقتصاص الجزء السفلي من الصورة.تظهر هذه المشكلة بشكل خاص في الصور ذات الاتجاه الرأسي، حيث يتم تشكيل شريط التمرير للصور ذات الاتجاه الأفقي (900 بكسل × 600 بكسل).لا أستطيع تحديد الأسباب التي تجعل الكود يعمل بنجاح أم لا، بغض النظر عن الترتيب أو النقرات، أو حجم النافذة، أو المتصفح.

هل لديك أي أفكار حول سبب تنفيذ هذا الرمز بشكل عشوائي بنجاح؟

//The following scales images proportionally to fit within the #slider div
$('#slider ul li img').each(function() {
    var maxWidth = $('#slider').outerWidth(false); // Max width for the image
    var maxHeight = $('#slider').outerHeight(false);    // Max height for the image
    var ratio = 0;  // Used for aspect ratio
    var width = $(this).width();    // Current image width
    var height = $(this).height();  // Current image height

// Check if the current width is larger than the max
if(width > maxWidth){
    ratio = maxWidth / width;   // Ratio for scaling image
    $(this).css("width", maxWidth); // Set new width
    $(this).css("height", height * ratio);  // Scale height based on ratio
    height = height * ratio;    // Reset height to match scaled image
}

var width = $(this).width();    // Current image width
var height = $(this).height();  // Current image height

// Check if current height is larger than max
if(height > maxHeight){
    ratio = maxHeight / height; // Ratio for scaling image
    $(this).css("height", maxHeight);   // Set new height
    $(this).css("width", width * ratio);    // Scale width based on ratio
    width = width * ratio;    // Reset width to match scaled image
}
});
initialize(); //initializes the jCarousel Lite carousel

Answer 1

هل حاولت تشغيله على تحميل النافذة jQuery(window).load(function() {

سيساعد هذا في التأكد من توفر جميع الصور قبل التحقق من أبعادها