Question

所以我有这个html / css / jQuery / js代码，它们一起显示了非常大的图像宽度。在加载和设置图像之前，基本元素应该是不可见的。然后通过轻微的淡入淡出即可看到基本元素。

但是行为有些不同。加载图片后，我可以看到小文本逐渐淡出，并且需要几秒钟的时间，图片才弹出一次（不显示从上到下的加载样式）

这是我使用的简化代码：

String.init(describing:)

现在，它怎么会不随图像淡入？

这是图片的示例，请检查以使其清楚我的意思 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

这是我创建的代码的有效示例：

https://codebrace.com/editor/b16cabfee

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

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

到

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

更新：

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

https://codebrace.com/editor/b16f33afb

Answer 3

你可以那样做。

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

在加载后，它会召唤一个回调，使用该回调执行自定义功能。让我知道怎么回事。

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

Answer 4

您似乎在误解代码的时间轴：

页面加载，（文本在屏幕上可见）
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); });
    });
});

加载后加载图像延迟显示

4 个答案: