gpt4 book ai didi

javascript - 在使用 jQuery 加载图像之前显示加载图像?

转载 作者:行者123 更新时间:2023-11-29 18:10:16 24 4
gpt4 key购买 nike

我在 SO 上关注了几个不同的类似问题,但由于某种原因它不起作用。有人可以帮我理解为什么吗?我希望加载图像首先显示,然后在加载更大的图像时淡出。较大的图像应该淡入。

fiddle :http://jsfiddle.net/95rpu029/2/

HTML

<article class="project">
<img width="375" height="375" src="http://dummyimage.com/375x375/000/fff" class="attachment-home-thumb">
</article>

JS

// Show loading image
$('article').prepend('<span class="loading-icon"><img src="http://i.imgur.com/lJpvTU3.gif" height="32" width="32" alt="Loading..."></span>');

// main image loaded ?
$('article img').on('load', function(){
// hide/remove the loading image
$('.loading-icon').fadeOut();
$('article').show();
});

CSS

article.project {
display: none;
float: left;
margin: 0 1% 2%;
max-width: 375px;
overflow: hidden;
position: relative;
width: 23%;
}

article.project img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}

最佳答案

发生这种情况是因为您的测试图像非常小,并且在您的代码有机会运行之前它已经加载。所以load未触发(因为图像已加载)。我对您的代码做了一些小改动并更新了 fiddle 。变化如下:

  1. 在开始时显示加载程序图像
  2. 创建一个 Image物体和电线 onload这个对象
  3. 为其分配来源(您要加载的实际图像)
  4. 当事件发生时,将源分配给原始图像<罢工>

    <罢工>
    var im = new Image();
    im.onload = function () {
    $("#img2Replace")[0].src = im.src;
    };
    im.src = "http://dummyimage.com/375x375/000/fff";
  5. <罢工>
<罢工>

<罢工>

那么现在我们必须为每张图片执行此操作:

    var imgs = $("article.project img.attachment-home-thumb");
$.each(imgs, function () {
var $this = $(this);
var im = new Image();
im.onload = function () {
var theImage = $this;
$this.hide("slow");
theImage[0].src = im.src;
$this.show('fast');
};
im.src = $this.data("mainsrc");
});

请注意,为了模拟加载实际图像的延迟,我使用了 setTimeout在 fiddle 中。

关于javascript - 在使用 jQuery 加载图像之前显示加载图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27955318/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com