javascript - 图片加载后运行JS

标签 javascript php jquery animation load

我有一个带有背景图像的 DIV。图片路径根据$_GET数组变化。

<div id="background-img" style="background: url('elements/<?php if (empty($_GET['p'])){ echo 'home'; } else { echo $_GET['p'];} ?>.jpg') no-repeat fixed center center; background-size:cover;"></div>

我希望使用过渡将该 DIV 的不透明度从 0 更改为 1

$(document).ready(function(){
        $('#background-img').css('opacity', '0');
        $('#background-img').animate({opacity: 1}, 2000);
})

现在这一切都很棒而且花花公子。 但我只希望在加载图像时发生此动画(图像非常大)。我还想运行其他动画,但只能在该图像加载后运行。

我尝试过这样做:

$(document).ready(function(){
        $('.fadein').css('opacity', '0');
        $('#background-img').css('opacity', '0');
        $('#header').css('opacity', '0');
});
$('#background-img').load(function(){
        $('#background-img').animate({opacity: 1}, 2000);
        $('#header').delay(1000).animate({opacity: 1}, 2000);
        $('.fadein').delay(2000).animate({opacity: 1}, 2000); 
});

但是没有成功。动画根本不运行。 我正在运行 jquery,并且很高兴用它来解决问题。 这看起来是一个很简单的事情,但我似乎不知道如何解决它。 是

一旦我弄清楚了,我还打算制作一些“加载”gif 动画进出。

最佳答案

对图像本身使用 .load。

$('#bg').ready(function(){
    $('#bg').css({opacity:"1"});
});

这里http://jsfiddle.net/UA94f/

关于javascript - 图片加载后运行JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20414982/

相关文章:

php - 访问YouTube API时出错: 'Warning: file_get_contents() [function.file-get-contents]: URL > file-access is disabled…'

php - 我的数据库设计中的搜索会很慢吗?

javascript - Highcharts SetData 只能工作一次

javascript - 将导航固定到顶部,然后向主体添加边距

javascript - 尝试理解 GAS 中的 getThreads

javascript - 获取 API 和 Cordova

php - 应该如何在 PHP 中合并数组的 2 个元素?

javascript - 查找表中与特定数字最接近的数字

javascript - 突出显示 div 中的文本

javascript - 一次应用多个翻译?