加载图像延迟显示后

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

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

我用你的小提琴弹了一下，想出了这个：

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

你可以这样做。

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

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

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

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

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

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

https://codebrace.com/editor/b16cabfee

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

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

自

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

更新：

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

https://codebrace.com/editor/b16f33afb

相关内容

最新更新

热门标签：