1

所以我有这个 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

4

4 回答 4

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 继续占据相同的空间，而不是破坏页面。并且延迟是针对浏览器的，我认为渲染一个大图像需要时间，所以让我们给出它。

于 2018-08-29T14:00:01.873 回答
0

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

https://codebrace.com/editor/b16cabfee

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

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

至

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

更新：

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

https://codebrace.com/editor/b16f33afb

于 2018-08-29T12:38:08.963 回答
0

你可以这样做。

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

加载后，它会调用一个回调，使用该回调来执行自定义功能。让我知道事情的后续。

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

于 2018-08-29T12:52:04.303 回答
0

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

  1. 页面加载，（文本在屏幕上可见）
  2. jQuery 启动，隐藏#base（文本在屏幕上不可见）
  3. 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); });
    });
});
于 2018-08-29T12:54:46.993 回答