加载图片延迟加载后显示

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

这是我创建的代码的工作示例：

https://codebrace.com/editor/b16cabfee

您的 baseHeight 变量未定义。也许你应该改变

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

至

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

更新：

我已经更新了解决方案。在这个解决方案中，我将 div 包裹在文本和图像周围。 Div 环绕图像设置为 position:relative; 以防止图像（设置为绝对位置）覆盖文本。

https://codebrace.com/editor/b16f33afb

Answer 2

你可以做到。

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

加载后，它会调用回调，使用该回调执行自定义功能。让我知道进展如何。

或者，顺便说一句。您可以在自定义变量中输入图像宽度和图像高度，并在加载时比较它们，一旦达到您想要的宽度和高度，就淡入。

Answer 3

您似乎稍微误解了代码的时间轴：

页面加载，（文本在屏幕上可见）
jQuery 开始，隐藏 #base（文本在屏幕上不可见）
jQuery 淡入 #base（文本再次出现在屏幕上）

这就是为什么您在图像加载之前会短暂看到文本的原因 - 因为它最初并未隐藏。

添加：

display: none;

在您的 #base 样式中，添加保持其余代码不变。

此外，在您添加上述 CSS:

后，我还创建了一个替代 JavaScript 解决方案

$(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

这可能取决于浏览器在脚本加载图像后需要渲染图像的时间。

我和你的 fiddle 玩了一会儿，想出了这个：

$(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 继续占据相同的 space，不会破坏页面。延迟是给浏览器的，我想大图渲染需要时间，所以就给它吧。

加载图片延迟加载后显示

Loading image delayed display after loaded

javascript

css

jquery

image

imagesloaded