发现这段代码可以达到想要的效果，在JSFiddle上试了一下
http://jsfiddle.net/AndyMP/7F9tY/366/
它似乎可以在加载后淡入图像。然后我在网页中尝试了它，但它的工作方式不一样，首先加载图像而不是淡入。虽然有时它似乎在加载的同时淡入。
是否有更可靠的方法来实现这一点，如果可能的话，最好通过修改此代码？
$("#image").ready(function(){
$("#preload").fadeIn(1000);
});
【问题讨论】：
fadeIn 应该在图像加载后调用。这是一个例子：
http://jsfiddle.net/mYYym/
【讨论】：
<div id="image">
<img id="preload" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>
.ready() 不会像你想象的那样触发，请参阅'load' jQuery 事件处理程序
$("#preload").load(function(evt){
$(this).fadeIn(1000);
});
【讨论】：
fadeIn() 实际 HTML 标记中的图像的唯一可靠方法是在 HTML 标记中设置 onload 处理程序，如下所示：
<div id="image">
<img id="preload" onload="fadeIn(this)" src="https://photos.smugmug.com/photos/i-NLws86p/0/b356e43a/L/i-NLws86p-S.jpg" style="display:none;" />
</div>
<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
$(obj).fadeIn(1000);
}
</script>
这里的工作演示：https://jsfiddle.net/jfriend00/X82zY/
这样做就是这样，你不需要给每张图片一个id或者class。只需在标记中设置样式和事件处理程序即可。
您必须将事件处理程序放在标记中的原因是，如果您等到页面的 javascript 运行时，可能为时已晚。图片可能已经加载（尤其是在浏览器缓存中），因此您可能错过了onload 事件。如果将处理程序放在 HTML 标记中，则不会错过 onload 事件，因为处理程序是在图像开始加载之前分配的。
如果您不想将事件处理程序放在 javascript 中，那么您可以执行类似的操作，在实际 HTML 中为图像使用占位符，然后使用 javascript 创建实际图像标签并插入它们，然后从占位符中拉取图片 URL：
<div>
<span class="fadeIn" data-src="https://photos.smugmug.com/photos/i-NLws86p/0/b356e43a/L/i-NLws86p-S.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>
工作演示：https://jsfiddle.net/jfriend00/BNFqM/
第一个选项会使您的图像加载得更快一些（因为图像加载会在页面解析后立即开始），但第二个选项可以让您对过程进行更多的编程控制。
【讨论】：
$(document).ready() 函数中做的地方。我很高兴选项 2 对您有用，但如果您想弄清楚为什么其他方法不起作用，选项 1 也可以。
this.style.display = "inline";在纯javascript中使其可见
纯java脚本和CSS解决方案：
使用带有 opactiy 的过渡效果。
const images = document.getElementsByTagName("img");
for (let image of images) {
image.addEventListener("load", fadeImg);
image.style.opacity = "0";
}
function fadeImg () {
this.style.transition = "opacity 2s";
this.style.opacity = "1";
}<img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Lunch_atop_a_Skyscraper.jpg" width="190">
<img src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png" width="190">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg" width="190">【讨论】：
对于发现这个问题并使用 angular.js 的人来说可能很有趣：
我写了一个小指令，它做得很好。
JS：
.directive('imgFadeInOnload', function () {
return {
restrict: 'A',
link: function postLink(scope, element, attr) {
element.css('opacity', 0);
element.css('-moz-transition', 'opacity 2s');
element.css('-webkit-transition', 'opacity 2s');
element.css('-o-transition', 'opacity 2s');
element.css('transition', 'opacity 2s');
element.bind("load", function () {
element.css('opacity', 1);
});
element.attr('src', attr.imgFadeInOnload);
}
};
});
HTML：
<img img-fade-in-onload="{{imgSrc}}" src="">
通过不在 HTML 中而是在指令代码中设置 src，解决了 jfriend00 提到的问题（在触发 onload 后附加处理程序）。
【讨论】：
这是一个基于@jfriend00 的答案的css 转换和javascript 解决方案，类似于@Robbendebiene 的方法：
onload="this.style.opacity=1"
img.fadein {
opacity: 1; /* fallback in case of no js */
transition: opacity 500ms ease;
max-width: 100%;
height: auto;
}
.js img.fadein {
opacity: 0; /* start with hidden image if we have js */
}<!-- use moderinr to provide the "js" class on the html element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">【讨论】：
对于那些在 8 年后寻找现代紧凑型非 jquery 版本的人（比如我）。如果下面插入的代码没有正确呈现，请尝试下面的小提琴，它可以工作
小提琴：http://jsfiddle.net/s6nvb95z/
fadeIn = e => e.style.opacity = 1;img {
width: 500px; // Just for this example
opacity: 0;
transition: opacity .2s ease-out;
}<div id="image">
<img onload="fadeIn(this)" src="https://live.staticflickr.com/4672/39593615781_fe8e95a6fb_k.jpg" />
</div>【讨论】：