Загрузка изображения с задержкой отображения после загрузки

Question

Итак, у меня есть этот html / css / jQuery / js код, который вместе показывает ОЧЕНЬ большое изображение в ширину. Базовый элемент должен быть невидимым, пока изображение не загружено и не установлено. Затем базовый элемент становится видимым благодаря небольшому затуханию.

Однако поведение немного отличается. Как только изображение загружается, я вижу, как мелкий текст исчезает, и требуется несколько секунд, прежде чем изображение просто всплывает за один раз (не загружается стиль, как сверху вниз, появляется)

Это упрощенный код, который я использую:

<script>
    $(function() {

        $("#base").hide();
        var baseHeight = $(window).height();
        var backLayerSRC = $('#img').attr('data-src');
        $('#base').height(baseHeight);

        var img = new Image();
        var imgWidth, imgHeight;

        img.onload = function() {
            imgHeight = this.height;
            imgWidth = this.width;

            var factor = 1 * baseHeight / imgHeight;
            totalWidth = Math.round(factor * imgWidth);

            currentWidth = totalWidth;
            $('#base').width(totalWidth);
            $('#img').attr('src', backLayerSRC);
            $('#img').height(baseHeight);

            $('#base').fadeIn(500);



        };

        img.src = backLayerSRC;

    });
</script>

<style>
    #base {
        position:absolute;
        left:0px;
        height:100%;
    }

    #base #img {
        position:absolute;
        left:0px;
        top:0px;
    }
</style>

<div id='base'>
    some tekst
    <img src='' id='img' data-src='path_to_very_large/image.png' />
</div>

Теперь, как могло случиться, что оно просто не исчезает с изображением?

Вот пример с изображением, пожалуйста, проверьте, чтобы было понятно, что я имею в виду http://jsfiddle.net/uz8mvtap/3

Answer 1

Это может зависеть от времени, которое требуется браузеру для рендеринга изображения после загрузки скриптом.

Я немного поиграл с твоей скрипкой и придумал:

$(function() {

    $("#base").css({opacity: 0});
    var baseHeight = $(window).height();
    var backLayerSRC = $('#img').attr('data-src');
    $('#base').height(baseHeight);

    var img = new Image();
    var imgWidth, imgHeight;

    img.onload = function() {
        imgHeight = this.height;
        imgWidth = this.width;

        var factor = 1 * baseHeight / imgHeight;
        totalWidth = Math.round(factor * imgWidth);

        currentWidth = totalWidth;
        $('#base').width(totalWidth);
        $('#img').attr('src', backLayerSRC);
        $('#img').height(baseHeight);

        $('#base').delay(1000).animate({opacity: 1.0},500);



    };

    img.src = backLayerSRC;

});

В основном использование прозрачности для таких целей лучше, потому что #base продолжает занимать то же пространство, не нарушая работу страницы. И задержка для браузера, я рассчитывал на большое изображение, которое требуется время для рендеринга, поэтому давайте дадим его.

Answer 2

Вы могли бы сделать это.

$('<img />').load( function(){
  console.log('loaded');
}).attr('src', imgUrl);

После загрузки вызывается обратный вызов, используйте этот обратный вызов для выполнения пользовательской функции. Дайте мне знать, как это происходит.

или, кстати. Вы можете ввести ширину и высоту изображения в пользовательскую переменную, и сравнить их с нагрузкой, как только она достигнет желаемой ширины и высоты, потушить ее.

Answer 3

Вы, кажется, немного неправильно истолковали временную шкалу вашего кода:

1. Страница загружается, (текст виден на экране)
2. jQuery запускается, скрывается #base (текст не отображается на экране)
3. jQuery исчезает в #base (текст снова отображается на экране)

Вот почему вы кратко видите текст перед загрузкой изображения - потому что оно изначально не скрыто.

Добавить:

display: none;

Для вашего стиля #base добавьте, чтобы оставшийся код оставался прежним.

---

Кроме того, я создал альтернативное решение JavaScript после добавления вышеуказанного CSS:

$(function() {
    const base = $("#base"),
        img = $("#img"),
        backLayerSRC = img.attr('data-src'),
        baseHeight = $('#base').height();

    img.attr('src', backLayerSRC);

    img.one("load", () => {
        img.height(baseHeight).promise().done(() => { base.fadeIn(2500); });
    });
});

Answer 4

Вот рабочий пример вашего кода, который я создал:

https://codebrace.com/editor/b16cabfee

Ваша переменная baseHeight не определена. Может быть, вы должны изменить

$('#base').height(baseHeight);

до

var baseHeight = $('#base').height();

Обновление:

Я обновил решение. В этом решении я обернул div вокруг текста и изображения. Div, обернутый вокруг изображения, установлен на position:relative;, чтобы изображение (в абсолютном положении) не покрывало текст.

https://codebrace.com/editor/b16f33afb