加载图像后运行JS

Run JS after image is loaded

本文关键字：JS 运行 图像 加载      更新时间：2024-04-20

我有一个带有背景图像的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/

试试这个：

http://forum.jquery.com/topic/start-jquery-after-image-loads

或者这可能会有所帮助：加载:) 后图像淡入

http://jsfiddle.net/hmeev/

代码

$(window).load(function(){
        $('#background-img').animate({opacity: 1}, 2000);
        $('#header').delay(1000).animate({opacity: 1}, 2000);
        $('.fadein').delay(2000).animate({opacity: 1}, 2000); 
});
相关文章：