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

How to run code after an image has been loaded using JQuery

本文关键字：图像 运行 代码 加载 JQuery      更新时间：2023-09-26

我试图加载元素后，img元素已加载，但我已经尝试了一切我能想到的和没有工作。现在我想看看代码停止工作的地方，我发现我设置的警报没有在我需要执行代码的行之后运行。

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

$img是在函数中定义的。警报对文档起作用。准备线，而不是在$img.load之后。我尝试过添加事件监听器、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 bubbleOnLoad() {
    $img = $('#picture');
    $img.load(function () {
        alert('document loaded');
        $('#left-bubble').show();
    });
}
$(document).ready(function () {
    bubbleOnLoad();
});

这里是JSFiddle演示

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

$(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树可以停止触发已经存在于浏览器缓存中的图像

试试这个jQuery插件waitForImages

https://github.com/alexanderdickson/waitForImages 

//Javascript/jQuery
$(document).ready(function(){
  var counter = 0,totalImages= $('#preloader').find('img').length; 
  $('#preloader').find('img').waitForImages(function() {
    //fires for all images waiting for the last one.
    if (++counter == totalImages) {
      $('#preloader').hide();
      yourCallBack();
    }
  });
});
/*css*/
#preloader{
  position:absolute;
  top:-100px;/*dont put in DOM*/
}
#preloader > img{
  width:1px;
  height:1px;
}
<!--HTML [add the plugin after jQuery] -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js" ></script>
 
<!--HTML [after body start] -->
<div id=preloader>
  <img src="1.jpg" />
  <img src="2.jpg" />
  <img src="3.png" />
  <img src="4.gif" />
  <img src="5.jpg" />
</div>

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

$(document).ready(function() {
    bubbleOnLoad(); 
});
      
function bubbleOnLoad() {
    var newSrc = "https://lh5.googleusercontent.com/-lFNPp0DRjgY/AAAAAAAAAAI/AAAAAAAAAD8/Fi3WUhXGOY0/photo.jpg?sz=328";
    $img = $('#picture');
    $img.attr('src', newSrc) //Set the source so it begins fetching
      .each(function() {
          if(this.complete) {
            alert('image loaded')
            $('#left-bubble').show();
          }
      });
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-bubble" style="display:none">
  <img id="picture"/>
</div>

相关文章：