jQuery的你如何获得的图像上载褪色？

StackOverflow https://stackoverflow.com/questions/1383870

  •  21-09-2019
  •  | 
  •  

题

所有我想做的事就是我的褪色标志在页面加载。我今天是新来的jQuery，我不能设法淡入负载，请帮助。很抱歉，如果这个问题已经回答了我有看，并尝试不同的问题，适应其他的答案，但似乎没有任何工作和其开始阻挠我。

感谢。

代码：

<script type="text/javascript">                                         
$(function () {
.load(function () {
      // set the image hidden by default    
      $('#logo').hide();.fadeIn(3000);
                                }}                     
 </script>                
    <link rel="stylesheet" href="challenge.css"/>  
<title>Acme Widgets</title>         
  </head>     
  <body> 
     <div id="wrapper"> 
     <div id="header">
     <img id="logo" src="logo-smaller.jpg" /> 
     </div>
      <div id="nav">
      navigation
     </div>
      <div id="leftCol">
      left col
     </div>
      <div id="rightCol">
        <div id="header2">
        header 2
        </div>
        <div id="centreCol">
        body text
        </div>
        <div id="rightCol2">
        right col
        </div>
     </div>
     <div id="footer">
     footer
     </div>
     </div>
  </body>
</html>
有帮助吗？

解决方案 13

我找出答案！您需要使用在window.onload功能如下图所示。由于Tec的家伙，卡里姆的帮助。注意：您仍然需要使用文件准备好功能太。 

window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););

据图像后立即放置时也为我工作...谢谢

其他提示

此螺纹似乎不必要地争议。

如果你真的想正确地解决这个问题，使用jQuery，请参阅下面的解决方案。

现在的问题是“jQuery的你如何在图像上载褪色？”

首先，快速说明。

这是不是$（文件）。就绪...

一个很好的候选

为什么呢？由于该文件是准备当HTML DOM被加载。徽标图像将不准备在这一点 - 它可能仍然实际上可以下载

所以要回答第一个一般性的问题“jQuery的你如何在图像中褪色的负载？” - 在这个例子中，图像具有一个id =“标志”属性：

$("#logo").bind("load", function () { $(this).fadeIn(); });

这不正是这个问题问什么。当图像已加载，它会褪色。如果你改变图像的来源，当新的源加载，它会褪色英寸

有是关于使用在window.onload旁边jQuery的评论。这是完全可能的。有用。可以办到。然而，window.onload事件需要呵护的特定位。这是因为，如果你使用它不止一次，你覆盖以前的事件。实施例（随意尝试...）。

function SaySomething(words) {
    alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };

当然，你不会在你的码连续3个的onload事件如此接近。你最有可能有一个脚本，做一些事情的onload，然后添加你的window.onload处理程序在你的形象褪色 - “为什么我的幻灯片放映停止工作！？” - 因为在window.onload问题

的jQuery的一个很大的特点是，当你绑定事件使用jQuery，他们都得到补充。

所以你有它 - 这个问题已经被标记为回答，但答案似乎是基于所有的意见是不够的。我希望这可以帮助任何人在世界上的搜索引擎到达！

您有第5行语法错误：

$('#logo').hide();.fadeIn(3000);

应该是：

$('#logo').hide().fadeIn(3000);

只需设置标志的风格display:hidden和呼叫fadeIn，而不是先调用hide：

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>

要与你需要通过一个.each()功能来运行多个图像做到这一点。这工作，但我不知道它是多么有效。

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});

的window.onload是不值得信任..我会使用：

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>

使用从Sohnee和karim79的例子。我测试这一点，它在这两个FF3.6和IE6工作。

<script type="text/javascript">
    $(document).ready(function(){
        $("#logo").bind("load", function () { $(this).fadeIn('slow'); });
    });
</script>

<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>

的关键是使用$(window).load(function(){}所以我们知道该图像被加载。通过隐藏的CSS功能的图像然后褪色它在使用淡入：

$(function() {

  $(window).load(function(){
    $('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
  });

});

这思想： http://www.getpeel.com/

是 Desandro是imagesloaded 插件

1 - 在CSS隐藏图像：

#content img { 
    display:none; 
}

2 - 淡入与JavaScript上负载的图像：

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});

OK，所以我做这个和它的作品。它基本上是从这里开始的不同反应砍死在一起。由于有 STILL 没有一个明确的在这个线程的答案，我决定发布此。 

<script type="text/javascript">
  $(document).ready(function () {
    $("#logo").hide();
    $("#logo").bind("load", function () { $(this).fadeIn(); });
  });
</script>

这在我看来是去了解它的最佳方式。尽管Sohnee的最好的意图，他没有提到的是，对象必须首先设置为显示：无与CSS。这里的问题是，如果什么都原因，用户的JS不工作的对象只会永远不会出现。并不好，尤其是如果它是frikin'标志。

此溶液离开独自在CSS项，以及第一皮，然后褪色它在所有使用JS。这样，如果JS不能正常工作，该项目将只加载正常。

希望帮助别人谁绊倒入此谷歌排名第一不那么有用的线索。

像SÖHNE提到，但我会补充一点：

$("img").hide();

$("img").bind("load", function () { $(this).fadeIn(); });

或：

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});

我尝试以下之一，但没有工作; 

    <span style="display: none;" id="doneimg">
        <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
    </span>

    <script type="text/javascript">
        //$(document).ready(function () {
            $("#doneimg").bind("load", function () { $(this).fadeIn('slow'); });
        //});
    </script>

BU以下一个工作得很好; 

<script type="text/javascript">
        $(document).ready(function () {
            $('#doneimg').fadeIn("normal");
        });
</script>

            <span style="display: none;" id="doneimg">
                <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
            </span>

<强> CSS3 + jQuery的解决方案

我想的是没有采用jQuery的淡入淡出效果，因为这原因，许多移动装置滞后的溶液中。

通过史蒂夫芬顿的回答借款我已经适应了一个版本，这是与CSS3过渡性质淡化的形象和不透明度。这也考虑到浏览器高速缓存的问题，在这种情况下该图像将不会显示使用CSS。

下面是我的代码和工作拨弄：

<强> HTML 

<img src="http://placehold.it/350x150" class="fade-in-on-load">

<强> CSS 

.fade-in-on-load {
    opacity: 0;
    will-change: transition;
    transition: opacity .09s ease-out;
}

<强> jQuery的片段 

$(".fade-in-on-load").each(function(){
    if (!this.complete) {
        $(this).bind("load", function () {
            $(this).css('opacity', '1');
        });
    } else {
        $(this).css('opacity', '1');
    }
});

这里发生的是图像（或要素）要在加载时需要有适用于它的.fade-in-on-load类提前褪色。这会为它分配一个0不透明度和指定的过渡效果，可编辑渐变速度在CSS味道。

然后，JS将搜索具有类和绑定加载事件给它的每个项目。一旦这样做，不透明度将被设置为1，并且图像将淡入，如果图像是已经存储在浏览器高速缓存已经，它将立即淡入

使用此一产品详情页。

这可能不是最漂亮的实现，但它的工作很好。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top