Масштабирование изображений с помощью jQuery - кеш браузера в пути

Question

Чтобы увидеть мою проблему в действии, 1-й клик эта ссылка . Затем нажмите этот . Обратите внимание, как изображения сжимаются? (возможно, вам придется щелкнуть через пейджер, чтобы увидеть его).

Я полагаю, это из-за кеша браузера. Вот javascript, выполняющий работу:

$("#grid_slider").slider({
    value: 50,
    max: 100,
    min: 10,
    slide: function(event, ui) {
        $('ul#grid li').css('font-size',ui.value+"px");
    }
});

$("ul#grid li img").each(function() {
    var width = $(this).width() / 125 + "em";
    var height = $(this).height() / 125 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
});

Надеюсь, вы сможете воспроизвести проблему. Не уверен, что нужно сделать, чтобы это исправить ... думал о том, чтобы просто убрать эту функцию вместе. Заранее спасибо.

Answer 1

Я вижу проблему, которую вы описываете. На самом деле я не думаю, что это кеш браузера, но время загрузки ... Я видел проблему и на некоторых других сайтах, и поэтому сформировал (плохо информированное) мнение об этом.

Похоже, что основная проблема заключается в том, что браузеру задают вопрос о размере изображения, прежде чем он узнает, что это такое ... Ваш скрипт запускается на $(document).ready, но это может произойти до полной загрузки $("ul#grid li img"), поэтому для некоторые изображения $("ul#grid li img").width() могут быть неизвестны ...

Может быть, использовать это вместо этого, и посмотреть, помогает ли это? (переключатели $().each для $().load)

$("ul#grid li img").load(function() {
    var width = $(this).width() / 125 + "em";
    var height = $(this).height() / 125 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
})

(Полностью предположение, хотя ...)

Приложение: читая справку jQuery по функции загрузки только что, кажется, что она не запускается для вещей, уже загруженных к тому времени, когда это вызывается ... Так что вам, возможно, придется сделать и то, и другое (вызов $().each и установите $().load) ...