Question

我有一个代码：

$("img").not("div.counters img, div.l-column.l-column_1 img").each(function(){
    var src = $(this).attr("src");
    $(this).attr("data-src", src);
    $(this).attr("src", "./frontend/web/img/loading.gif");
});
$("img").not("div.counters img, div.l-column.l-column_1 img").unveil(200).load(function() {
    console.log('image loaded');
});

我需要的是一个序列：

1）用户访问该网站并在下载“loading.gif”之前看到了。

2）用户下载图像后，它将显示在“loading.gif”的位置。

我现在拥有的内容：

1）用户访问了该网站并看到了原始图片。

2）一旦加载脚本，他就看到了“loading.gif”。

3）然后立即改为原始图像。

如何不在原始图片的开头显示？

Answer 1

保留图像＆＃34; loading.gif＆＃34;在CSS中，将其设置为最初要显示图像的容器的背景。

  .loading-image{
                 background-image:url('loading.gif');
                }

下载图像后，将图像放在容器上，然后SIMPLY删除类名。

   $(".img-container").removeClass('loading-image');

我希望这就是你要找的......如果我错了，请纠正我。

如何加载图片？

1 个答案: