声呐的工作原理是啥？

Posted 2023-04-06

声纳（SONAR）是一个英文名词缩写的译音，全文的意思是“声波导航与测距”。声纳和雷达工作原理很相似，不同的是，一个是利用电磁波进行传播，一个是利用声波进行传播。电磁波在空气中传播的速度是30万千米／秒，因此，常把雷达叫做千里眼，但是雷达在水下使用就不灵了，因为海水对电磁波的吸收能力很强。声波的传播速度也是很快的，它不仅仅能在空气里传播，而且还可以在水中传播，在水中传播的速度是1450米／秒，比在空气中传播的速度要快4?5倍。有的人曾经做过实验，在水下引发重300磅的炸药，它的巨大声音在水下传播到2万千米以外，在空气里是绝对不可能传播这么远的。因此，利用声波在水中传播的特性发展了声纳这种装备。

声纳是根据什么原理探测水下目标呢？

声纳的核心部件是换能器。从发射机送出一个电信号，经过换能器变成声波，声波向外辐射，从目标上反射回来的声波或是目标本身反射的声波经过换能器可以变成电信号送入接收机，再经过放大、滤波就可以得到目标的信息。但是换能器发出的声波没有方向性，能量也不集中，即使探测距离很近它也不能够辨别目标的方向。为了把声波的能量集中起来，让它变成有方向性的声波，采取两种办法，一种是把换能器放到像喇叭口的反射器的中心线上，发出声音以后经过汇集就朝一个方向传播，不断转动喇叭口就可以改变声波传播的方向；第二种办法是把许多换能器按一定的方式排列组合起来，构成一个基阵，基阵中心声音增强。根据这个原理换能器就能够收到比较远的信号，同时也可以很准确地测出目标的距离。

根据声纳的工作方式不同，它可以分成两种类型：一种叫做主动声纳，就是声纳本身要发出声波，声波遇到了障碍物以后返回，它再接受回波，这样可以测定出目标的方位和距离。但是，由于声纳本身要发出声波，容易被敌人发现，因而暴露目标；另外一种叫做被动声纳，声纳本身不发出声波，只是探听对方目标发出的声音，它的保密性比较好，也可以根据接收到的声音来判断目标的性质。但是，它不能探测不发声音的目标。现在的声纳都是以上两种方式相结合，根据探测对象不同，有时用主动声纳，有时用被动声纳，两种结合使用效果就会更好一些。

声纳声纳在军事上用于水中目标搜索、警戒、识别、跟踪、监视和测定，进行水下通信和导航。声纳技术还用于鱼雷自导和水雷引信。声纳是一个大家族，在军队服务的主要有四兄弟，大哥在水面舰艇服务，它的主要任务是反潜，探听有没有潜水艇进攻，它的探测距离不同，近一点的达到5海里，最大的探测距离达到120海里；二弟在潜艇上服务，它主要探测水下目标和水面目标，探听周围有没有别的潜艇存在以及水面上有没有敌人的舰船，同时它还为鱼雷提供导航；三弟是机载声纳，在反潜巡逻机和反潜直升机上服务，它有一个很长的尾巴连着，搜集水里的情报；老四是固定声纳，在固定的位置上站岗放哨。它在海底或是飘浮在海面，侦查敌人的潜艇，保卫国家的海防。藏在海底的声纳隐蔽性非常好，能够长时间的工作。

由于声纳靠声波探测，受水文条件的影响和目标变化的影响都很大。比如，在同一海区进行探测潜艇的作业，在冬天探测效果很好，到了夏天由于水温升高，探测的效果就明显下降，有时根本找不到目标。因为海水有的地方温度高，有的地方温度低，在这种变化层里声纳就很不稳定。如果有风浪、海底地形变化大、目标运行速度快等等，都会影响声纳探测结果。为了进一步增强反潜艇的探测能量，除主要提高声纳性能外，还发明一些不完全靠声音探测的办法，与声纳配合使用。比如利用雷达或是用磁力探测仪、红外探测仪及废气探测仪等等，因为常规潜艇不可能长期在水下活动，而是隔一两天就要浮出水面补充氧气，只要它一浮出水面就会被雷达发现。潜艇都是用钢铁制造的，它在水中航行会使磁场发生变化，可以用磁力方法来探测有没有潜艇。另外，潜艇本身散发一定的热量，也可以用红外探测的办法发现潜艇的存在。潜艇还要排除一些废气，可以利用测量废气来探测潜艇。所以各种探测设备要和声纳配合起来使用，才能起到最佳的效果。

参考技术A 利用超声波，声呐主要利用超声波来帮助定位（回声定位）

使用 JavaScript 延迟加载图像的工作原理是啥？

【中文标题】使用 JavaScript 延迟加载图像的工作原理是啥？

【英文标题】：How lazy loading images using JavaScript works?使用 JavaScript 延迟加载图像的工作原理是什么？

【发布时间】：2012-03-12 13:10:14

【问题描述】：

我很好奇延迟加载图像，即滚动到它们时将加载的图像的工作原理。

有什么提示吗？

【问题讨论】：

这能回答你的问题吗？ How do you make images load only when they are in the viewport?

【参考方案1】：

这是使用插件的方法：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ 这是 jquery 插件：http://www.appelsiini.net/projects/lazyload

基本上你在src 属性中放置一个虚拟图像并为实际图像添加另一个属性，JS 检测页面的滚动位置，并在你足够接近图像时加载图像数据。它通过将src 替换为实际图像的源来实现。

这里有另一种解释：http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/

【参考方案2】：

2020+ 解决方案：

有一种延迟加载图像的本机方法已经在某些浏览器中工作。虽然标准化仍在进行中，但您今天已经可以使用它！只需将loading 属性添加到您的图像标签并将其设置为“惰性”：

<img
    src="picture.jpg"
    
    
    
    loading="lazy"
>

就是这样。只要当前视口足够近，兼容的浏览器就会延迟加载该图像。

此处提供更多信息：

Native lazy-loading for the web Request to be added in the HTML specification Current browser support

如果您需要旧版浏览器的解决方案，您应该查看 MDN 上的 Lazy loading。

【讨论】：

这样的延迟加载有什么缺点吗？如果不是，不是每张图片都应该使用loading 属性吗？

***.com/questions/61314750/…

此解决方案目前不支持在 chrome 中打印，请参阅此bugreport。打印页面时，尚未加载的图像将在打印输出中丢失。

【参考方案3】：

以及如何轻松做到这一点的示例。

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">

“lazy.jpg”可以用于所有图像，这将导致实际上只加载一张图像（这是一个 1x1 像素的小重量图像）。所以，考虑一下我有一个要访问的 250 家商店的列表，每个商店都有一个公司徽标。可能看起来像这样：

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg">
...

然后魔法来了！ 把它放在你的 javascript 文件中：

$('img[src="/images/lazy.jpg"]').each(function(index, el) 
    $(el).attr('src', $(el).data('real-src'));
);

wacka-wacka，所有的lazy.jpg 图像都将被它们的“真实”图像替换。让您的 html 页面加载更快的目的（因为这 250 家公司在lazy.jpg 中都有相同的“徽标”:)...但是 JS 会在 DOM 完成加载后处理这一切。

这当然是一个 jQuery 解决方案。也可以用纯js来完成。

【参考方案4】：

可以使用justlazy，它独立于jQuery等依赖，非常轻量级：

您需要的唯一电话是：

var placeholders = document.querySelectorAll(".load-if-visible");
for (var i = 0; i < placeholders.length; ++i) 
  Justlazy.registerLazyLoad(placeholders[i]);

占位符必须是以下结构：

<span data-src="url/to/image" data-
      data-title="some title" class="load-if-visible">
</span>

出于 SEO 原因，您可以使用任何其他占位符（例如占位符图片）。

此外，还有一个如何使用它的指南以及一些关于延迟加载图像的一般信息。

【参考方案5】：

使用将侦听器附加到滚动事件或使用 setInterval 的传统方式延迟加载图像的性能非常低，因为每次调用 getBoundingClientRect() 都会强制浏览器 re-layout 整个页面，并且会给您的页面带来相当大的卡顿网站。

使用 Lozad.js（只有 569 字节，没有依赖关系），它使用 InteractionObserver 来高效地延迟加载图像。

【参考方案6】：

浏览器级别的原生延迟加载终于可用了。

<img src="image.png" loading="lazy"   >

<img loading=lazy> 受到大多数流行的 Chromium 驱动的浏览器（Chrome、Edge、Opera）、Firefox 的支持，WebKit (Safari) 的实施正在进行中。 Can I use 有关于跨浏览器支持的详细信息。不支持加载属性的浏览器会直接忽略它而不会产生副作用。

Improved data-savings and distance-from-viewport thresholds

【参考方案7】：

2021 - 保持简单...

这里有很多 插件 建议，根据您的用例，这些建议可能对您很有价值。

如果您懒得在下面编写这个简短的 sn-p 代码，或者您需要已经构建的回调，那么您可以使用我构建的这个插件，它基于这个确切的答案，缩小后只有 0.5kb。我的插件 Simply Lazy 甚至可以在 IE 上使用，如果您只需添加一个 polyfill。

最后，如果您只需要延迟加载一些图像，那么它很简单：

<img data-src="your-image-path-here" class="lazyload" />

还有：

let observer = new IntersectionObserver((entries, observer) => 
  entries.forEach(function (entry) 
    if (entry.intersectionRatio > 0 || entry.isIntersecting) 
      const image = entry.target;
      observer.unobserve(image);

      if (image.hasAttribute('src')) 
        // Image has been loaded already
        return;
      

      // Image has not been loaded so load it
      const sourceUrl = image.getAttribute('data-src');
      image.setAttribute('src', sourceUrl);

      image.onload = () => 
        // Do stuff
      

      // Removing the observer
      observer.unobserve(image);
    
  );
);

document.querySelectorAll('.lazyload').forEach((el) => 
  observer.observe(el);
);

使用Intersection Observer API 让这一切变得非常简单。您也可以在shadowRoot 中使用它，它在那里也可以正常工作。

我还发现这个article 有助于了解这里发生了什么。

【参考方案8】：

有很多方法可以实现延迟加载。这个过程就是你加载你需要的东西。您可以延迟加载软件场景中的任何内容。在网站上，大多数在加载图像时都会使用它，这是因为大多数网站几乎只是图像。我的意思是网站的艺术作品加上他们可以在您的服务器上拥有数千张图片的真实人物图片。当您尝试同时加载所有这些文件时，这通常会导致速度变慢。在某些时候，它开始减慢这个过程。因此，延迟加载通常适用于大型网站。就像我说的那样，您可以通过多种方式做到这一点。已经给出了一种方法。已经加载了 img 标签，但 src 部分指向一个虚拟文件，它的大小很小。不要使用图形或图片的图像......使用像灰色块这样的东西......或者什么都不能使用。然后当滚动部分靠近图像附近的滚动点时。它将运行一个函数，它将用真实的图像链接替换 ​​src。另一种方法是使用 ajax 和关闭时的滚动点将追加...加载实际的 html 代码和 src 中的图像。这是我实际使用的。我编写了一个 PHP 文件来延迟加载图像、数据、文本。

此方法的重点是在需要时从网站下载文件。加载图像时，它实际上是从您的服务器下载的。因此，当您开始处理较大的图像文件和太多的图像文件时，下载过程和实际加载时间可能会增加。