加载后淡入图像 [英] Fade in images after they have loaded

问题描述

我发现这段代码达到了预期的效果，并在JSFiddle上试用了

I found this code to achieve the desired effect and tried it on JSFiddle

http://jsfiddle.net/AndyMP/7F9tY/366/

它似乎工作在它消失加载后的图像。然后我在一个网页上尝试了它并且它的工作方式不一样，首先加载图像而不是将其淡入。尽管有时它看起来像是在加载的同时淡入。

It seems to work in that it fades the image in after it has loaded. Then I tried it in a webpage and it didn't work the same way, loading the image first rather than fading it in. Although sometimes it seemed like it was fading in at the same time as it loaded.

是否有更可靠的方法来实现这一目标，最好是在可能的情况下修改此代码？

Is there a more reliable way of achieving this, preferably by amending this code if possible?

$（ #image）。ready（function（）{
$（＃preload）。fadeIn（1000）;
}）;


推荐答案

唯一可靠的方法fadeIn（） 实际HTML标记中的图像是在HTML标记中设置 onload 处理程序，如下所示：

The only reliable way to fadeIn() an image that is in your actual HTML markup is to set an onload handler in the HTML markup like this:

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

这里的工作演示： http://jsfiddle.net/jfriend00/X82zY/

这样做，你不需要给每个图像一个id或者类。只需在标记中设置样式和事件处理程序。

Doing is this way, you don't need to give each image an id or class. Just set the style and the event handler in the markup.

您必须将事件处理程序放在标记中的原因是，如果您等到页面的javascript运行，可能为时已晚。图像可能已经加载（特别是如果它在浏览器缓存中），因此您可能错过了 onload 事件。如果您将处理程序放在HTML标记中，您将不会错过 onload 事件，因为处理程序是在图像开始加载之前分配的。

The reason you have to put the event handler in the markup is that if you wait until your page's javascript runs, it may be too late. The image may already be loaded (particularly if it's in the browser cache) and thus you may have missed the onload event. If you put the handler in the HTML markup, you will not miss the onload event because the handler is assigned before the image starts loading.

如果您不想在javascript中放置事件处理程序，那么您可以执行以下操作：在实际HTML中使用占位符替换图像，并使用javascript创建实际的图像标记，插入它们并从占位符中提取图片网址：

If you don't want to put event handlers in the javascript, then you can do something like this where you use a placeholder for the image in the actual HTML and you use javascript to create the actual image tags and insert them and pull the image URL from the placeholder:

<div>
    <span class="fadeIn" data-src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

工作演示： http://jsfiddle.net/jfriend00/BNFqM/

第一个选项可以让您的图像加载得更快一些（因为图像加载会立即开始页面解析），但第二个选项为您提供了对该过程的更多编程控制。

The first option will get your images loaded a little quicker (because image loading starts immediately upon page parsing), but the second option gives you more programmatic control over the process.

这篇关于加载后淡入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！