jQuery.Cycle показывает маленькие изображения при первой загрузке

Question

У меня проблема с плагином jQuery.cycle. При первой загрузке страницы (когда imgs не кэшируются) на нем отображаются маленькие imgs, например миниатюры. Вы можете увидеть это в (edit: извините, старая ссылка) - просто подождите, когда появится второй img - он маленький. Перезагрузка / обновление решает это, но это не настоящее решение, вы знаете.

Кто-нибудь знает, каково решение этой проблемы? Большое спасибо

Answer 1

Используйте $(window).load(function() { }); вместо $(document).ready(function() { });

Answer 2

Используйте overflow:hidden на контейнере изображений DIV

Answer 3

Та же проблема. Случайные изображения получали встроенные стили 24px x 24px. Вместо того, чтобы устанавливать высоту и ширину каждого изображения, я делал это с помощью CSS. Поскольку моя ширина была фиксированной ширины, я установил ее, но установил высоту на 100%:

.ParentDiv img { width: 400px !important; height: 100% !important; }

Параметр! Важный необходим для переопределения встроенных стилей, применяемых циклом jQuery.

Это также, похоже, решило еще одну проблему, с которой я столкнулся в IE8. Страница загружалась бы нормально, но изображения, казалось, загружались после всех загрузок CSS и jquery. Это привело к тому, что окно не расширялось, чтобы соответствовать высоте и ширине изображений внутри. Я представляю себе установку ширины и высоты, коробка с изображениями была размером с летучую мышь.

Answer 4

У меня была такая же проблема, и это сводило меня с ума! Я попытался предварительно загрузить изображения, проверил версии на всем и т. Д. Безрезультатно. Единственное, что, казалось, исправило это, было установка ширины и высоты для каждого изображения на странице, а не в CSS.

Answer 5

Хотя, возможно, это не является прямым ответом на вопрос (плагин jQuery.cycle мне неизвестен), многие из ответов здесь касаются проблемы обработки изображений после загрузки, и это также то, что люди приходят сюда, чтобы искать. Итак, вот что происходит:

24px появляются из-за неисправной логики на стороне браузера - возвращая преждевременные размеры для элемента управления заполнителя. У них другая логика управления для обработки кэшированных изображений, IE даже не вызывает для них onload, и поэтому возникает путаница.

Более надежная, чем (width===0) проверка во всем Интернете, если изображение загружено, свойство .complete DOM редко упоминается, по-видимому, поддерживаемым всеми основными браузерами: http://www.w3schools.com/jsref/prop_img_complete.asp

это сработало для меня:

$("img")
    .one('load', onLoadRoutine)
    .each(function() {
        if(!this.complete) {
            return; //.one() will fire eventually
        } else {
            onLoadRoutine({delegateTarget:this}); //fake event object
        }
    });

Обратите внимание на объект макета события {delegateTarget:this}. Желательно было бы jQuery(this).trigger('load'), но я не могу рекомендовать это, так как я не пробовал это в то время ...

тест .complete должен разрешить случай неисправной логики элемента управления заполнителем 24px, .one('load').each(). покрывает разделение потока управления на кэшированный / удаленный.

Answer 6

Я решил это, установив ширину и высоту в теге <img>.Но так как я использую скрипт для генерации списка изображений, и они иногда имеют разные размеры, я использовал немного php, чтобы решить это:

function displayimage($filename) {
    $imgsize = getimagesize("$filename");
    echo "<img src=\"$filename\" $imgsize[3] />\n";
}

$imgsize[3], например,width="585" height="285".

И затем, чтобы показать все jpgs в каталоге в слайд-шоу:

<div class="slideshow">
<?php
foreach (glob("*.jpg") as $filename) {
    displayimage($filename);
}
?>
</div>

Вывод

<div class="slideshow">
<img src="cat.jpg" width="575" height="256" />
<img src="dog.jpg" width="475" height="350" />
<img src="frog.jpg" width="675" height="300" />
</div>