Javascript 如何在使用JQuery加载映像后运行代码

我只是在img元素加载之后才尝试加载一个元素，但是我已经尝试了所有我能想到的方法，但是没有任何效果。现在我正在尝试查看代码停止工作的位置，我发现我设置的警报没有在我需要代码执行的行之后运行

$img = $('#picture');
function bubbleOnLoad() {
  $(document).ready(function() {
    $img.load(function(){
    alert('document loaded')
    $('#left-bubble').show();
  })
})

$img是在函数中定义的。警报在document.ready行工作，但在

$img.load

之后不工作。我尝试添加eventlisteners、jquery.on、.load和其他一些。我还调用了在init函数中运行的函数。有人能给我解释一下为什么什么都不起作用吗

function choosePic() 
 $('.speechbubble').hide();
 $('#picture').remove();
 var randomNum = Math.floor(Math.random() * samplePics.length);
 var img = new Image();
 img.onload = function() {
  $('.playing-field').prepend(img);
 handleImageLoad();
 }
 img.src = samplePics[randomNum];
 img.id = "picture";
}


var samplePics = 
 "assets/images/barack-obama.jpg",
 "assets/images/donald-trump_3.jpg",
 "assets/images/dt-2.jpg",
 "assets/images/bill-clinton.jpg",
 "assets/images/Rose-Byrne.jpg",
 "assets/images/pic.jpeg", 
 "assets/images/priest.jpg", 
 "assets/images/tb.jpg",
 "assets/images/test.jpg", 
 "assets/images/amy-poehler.jpg",
 "assets/images/stephen-colbert.jpg",
 "assets/images/aziz-ansari.jpg"
];

---

在你的代码中，你甚至没有告诉浏览器应该在加载图像后运行代码。你应该这样做：

$(function(){

  // DOM Content is ready, let's interact with it.

  $('#picture').attr('src', 'image.jpg').load(function() {  
    // run code
    alert('Image Loaded');  
  });

});

开发人员使用.load（）快捷方式试图解决的另一个常见问题是，在图像（或图像集合）完全加载后执行函数。有几个已知的注意事项需要注意。这些是：

• 它在跨浏览器中无法稳定工作，也不可靠
• 如果图像src设置为与以前相同的src，则在WebKit中无法正确触发
• 它不能正确地在DOM树上冒泡 对于已经存在于浏览器缓存中的图像，可以停止激发

---

您的代码中有一些语法错误，我纠正了这些错误，并提出了以下建议：

function bubbleOnLoad() {
    $img = $('#picture');
    $img.load(function () {
        alert('document loaded');
        $('#left-bubble').show();
    });
}

$(document).ready(function () {
    bubbleOnLoad();
});

---

只有在DOM中创建HTML元素后，才能访问该元素。
您还需要在显示之前检查图像是否已加载。
因此，您的代码需要如下所示：

$（文档）.ready（函数（）{
bubbleOnLoad（）；
});
函数bubbleOnLoad（）{
var newSrc=”https://lh5.googleusercontent.com/-lFNPp0DRjgY/AAAAAAAAAAI/AAAAAAAAAD8/Fi3WUhXGOY0/photo.jpg?sz=328";
$img=$（“#图片”）；
$img.attr（'src'，newSrc）//设置源以便开始获取
.each（函数（{
如果（完成此项）{
警报（'已加载图像'）
$（“#左气泡”）.show（）；
}
});
}

---

试试这个jQuery插件waitForImages

//Javascript/jQuery
$（文档）.ready（函数（）{
var counter=0，totalImages=$（'#preload'）。find（'img'）。length；
$（'#preload'）。查找（'img'）。waitForImages（函数（）{
//激发等待最后一个映像的所有映像。
如果（++计数器==totalImages）{
$（“#预加载”）.hide（）；
yourCallBack（）；
}
});
});
/*css*/
#预紧器{
位置：绝对位置；
顶部：-100px；/*不放入DOM*/
}
#预加载>img{
宽度：1px；
高度：1px；
}

是否通过JavaScript动态加载img？或者使用img html标记？您是否阅读了文档，特别是“与图像一起使用时加载事件的注意事项”，为什么要将其包装在bubbleOnLoad函数中？这个函数调用过吗？为什么在函数bubbleOnLoad中有$（document）.ready（function（））？这对我来说似乎很奇怪…大括号是不平衡的，这可能没有帮助。嗯。这似乎不起作用，我曾经有过相同的代码。只是在调用它的最后，我使用了document.ready-$（气泡负荷）@TiffanyHaltom请给我更多关于什么不起作用的细节。因为当我测试代码时，
#左气泡
只有在图片加载后才会显示。我真的不确定什么不起作用，可能是因为事件冒泡，我必须处理更多。当你编写的代码运行时，图像加载，b但是气泡没有，但它确实与您提供的JSFIDLE一起工作。一点也没有，这让我认为它与事件气泡有关。我可能错了。我为图像编写了以下代码：
function choosePic（）{$（'.speechbubble'）.hide（）；$（'#picture'）.remove（）；var randomNum=Math.floor（Math.random（）*samplePics.length）；var img=new Image（）；img.onload=function（）{$（'.playing field'）.prepend（img）；handleImageLoad（）；}img.src=samplePics[randomNum]；img.id=“picture”；}
-这些都加载了另一个存储图像的功能。请告知我的答案是否有用。在我的情况下，它不起作用，因为我只为页面加载一个图像，直到它刷新，然后我会抓取另一个图像，但非常感谢！您不需要使用计数器（事实上，目前它不起作用），该函数将仅在加载所有子映像后调用。请检查。