Question

如果我有一个灯塔：

<img src="http://example.com/beacon" />

我希望在信标请求完成后调用一个方法。类似的东西：

<script>
    $("img.beacon").load(function() {
        // do stuff knowing the beacon is done
    });
</script>

有可能吗？它是在jQuery中吗？

Answer 1

不确定。请记住，需要在src属性之前添加负载。

$('<img />').load( function(){
  console.log('loaded');
}).attr('src', imgUrl);

如果您已经在标记中定义了图像标记，那么当窗口加载事件触发时您就会卡住，以确保图像已经下线。

Answer 2

$('img.beacon').load()

不会一直正常工作，通常我会这样做：

$.fn.imageLoad = function(fn){
    this.load(fn);
    this.each( function() {
        if ( this.complete && this.naturalWidth !== 0 ) {
            $(this).trigger('load');
        }
    });
}

上述代码还包括在执行脚本之前图像已完成加载的情况。在标记中定义图像时可能会发生这种情况。

像这样使用：

<img src='http://example.com/image.png' class='beacon' />
<script type='text/javascript'>
$(document).ready(function(){ //document.ready not really necessary in this case
   $('img.beacon').imageLoad(function(){
      //do stuff
   });
});
</script>

Answer 3

   <script type="text/javascript">
   $().ready(function() {

       $('img#beacon').attr('src', 'http://sstatic.net/so/img/so/logo.png')
            .load(function() { alert('Image Loaded'); })
            .error(function() { alert('Error Loading Image'); });
   });
   </script>

这将加载Stackoverflow徽标。

如果加载成功，则发出警报（'Image Loaded'）;执行

如果失败，则发出警报（'Error Loading Image'）;执行

当然，其中任何一个都可以用你自己的功能代替。

作为新用户，它拒绝了我的图片标记;但是image标签应该只包含id ='beacon'属性;除非你想要添加一个类。我们在这里设置代码中的'src'属性，通常你正在监视完成的图像具有以编程方式设置的src值。

Answer 4

另一个选项，如果它适合您：onload event在加载页面或图像后立即发生。

如：

<img ... onload="alert('test');" />

Answer 5

这是一个适用于所有浏览器的简单JavaScript代码：

var myImage = new Image();

myImage.onload = function() {
    var image_width = myImage.width;
    var image_height = myImage.height;
    $('#pictureEl').html('<img width="'+ image_width +'" height="'+ image_height +'" src='+ myImage.src + '></img>');           
};

myImage.src = myUrl;

jQuery代码片段必须在幕后做同样的事情。

Answer 6

您可以使用在整个页面加载完毕后触发的onload事件。

$(window).load(function(){
  //everything is loaded
});

Answer 7

您可以通过两种方式轻松完成操作。让我们看一下方式：

1。在onload标签中使用img属性：

<img onload="alert('loaded');" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

这将在照片加载完毕后触发警报。

2。在JavaScript中使用EventListener：

document.getElementsByTagName("img");.addEventListener("load", function loaded(){
  //any code you may need
  });

这些代码位于您的外部js文件或内部脚本标签中。

您可以使用img和class属性为每个单独的id标签执行此操作。

JavaScript：了解图像何时完全加载

7 个答案: