元'；t隐藏-Jquery

我有几个包装，其中包含一个加载gif，而真正的图像加载

我还有一些jquery，它应该在加载真实图像后隐藏gif，但加载的gif不会隐藏。如果我将$（this）替换为$（“.displayImg”），它会工作，但会影响所有加载GIF。为什么$（这个）使它不隐藏

$（'.displayImg'）。在（“加载”，函数（）上）{
$（this.parent（）.find（“.loadingImage”）.hide（）；
});
您根本不需要使用Javascript。一种方法是将加载程序作为背景图像。当实际图像加载时（假设它没有任何透明度），它将覆盖加载程序。你可以随意调整装载机的大小和位置


.wrapper1{
宽度：350px；
高度：150像素；
背景图片：url(https://media0.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif);
}
.wrapper 2{
宽度：200px；
高度：100px；
背景图片：url(https://media0.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif);
背景位置：50%50%；
背景尺寸：包含；
背景重复：无重复；
}
您的代码运行良好，但您可以这样改进：

$('.displayImg').on("load", function() {
  $(this).prev(".loadingImage").hide();
});

您的代码有一些语法问题，但实际上运行得很好。我编辑了你的问题，并把它变成了一个连续的片段。我必须添加jQuery依赖项，您确定jQuery已加载到您的项目中吗？（每次运行此代码段时，请清除缓存以查看加载程序。）是否确实为所有图像运行加载处理程序？添加
console.log（this.src）
并检查是否看到它们各自的消息。改进方法是使用
.closest（）
，然后使用
.find（）
备份DOM树。一旦添加了HTML同级或插入了更多嵌套，您的建议就会变得脆弱且容易出错。看起来更像是一条评论，或者更适合这样的网站的答案。为什么不将加载的gif添加为
背景图像
，因为
是一个透明的PNG（正如您正确注意到的那样）。一些JS仍然可以删除不必要的微调器。