使用轮子：
使用方法：
1、在head处引入文件
<script src="https://open.soarli.top/lazyload/echo.min.js"></script>2、插入图片
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="图片真实地址">3、紧接</body>在其之前插入以下代码：
<script>
Echo.init({
offset: 0, //离可视区域多少像素的图片可以被加载
throttle: 0 //图片延迟多少毫秒加载
});
</script>成功使用轮子~
示范：
<!DOCTYPE html>
<html>
<head>
<title>123</title>
<script src="https://open.soarli.top/lazyload/echo.min.js"></script>
</head>
<body>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="https://p5.img.cctvpic.com/photoworkspace/2020/05/20/2020052013394288064.jpg"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="https://p2.img.cctvpic.com/photoworkspace/2020/05/18/2020051809342593222.jpg"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="https://p3.img.cctvpic.com/photoworkspace/2020/05/18/2020051809320778948.jpg"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="https://p3.img.cctvpic.com/photoworkspace/2020/05/18/2020051809305848036.jpg"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="https://p1.img.cctvpic.com/photoworkspace/2020/05/17/2020051714480670879.jpg"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="https://p2.img.cctvpic.com/photoworkspace/2020/05/17/2020051711383759796.jpg"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="https://open.soarli.top/lazyload/loading.gif" data-echo="http://p2.img.cctvpic.com/photoAlbum/page/performance/img/2019/10/7/1570430463035_589.png"><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<script>
Echo.init({
offset: 0, //离可视区域多少像素的图片可以被加载
throttle: 0 //图片延迟多少毫秒加载
});
</script>
</body>
</html>懒加载定义：
延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。
作用：
减少请求数或者延迟请求数；减少并发量；节约客户端的渲染资源；
演示：
CSS代码：
只是设置图片的一些样式，可删。
<style>
*{margin: 0;padding: 0;}
img{width: 50%;display: inline-block;border: 1px solid #ccc;float: left;}
</style>HTML代码
1.png是一个1*1px的透明图或者带有logo，这样加载快，测试效果的话无所谓，只要能区分开路径不一样就行，jpg 格式图是实际应该加载的图片路径，data-url存放图片实际路径：
<div>
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/2.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/3.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/4.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/5.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/6.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/7.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/8.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/2.jpg" src="img/2.png" alt="">
</div>JS代码：
原理：
- 初始进入页面，计算要加载哪些图片，创建Image，加载图片，让要显示的图片路径改为实际路径；
- 滚动至图片要显示出来时（diff设置滚动至距图片多少距离开始加载），执行 1 的逻辑.
<script>
/*
* init() 在初始化时调用
*
* firstLoad() 是首次进入页面加载图片的方法
*
* bindScroll() 是绑定滚动
* */
var loadImg = {
init: function () {
this.firstLoad();
var self = this;
window.onscroll = function () {
self.bindScroll();
};
},
firstLoad: function () {
//设备可用高度
var availHeight = window.screen.availHeight;
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('.loadImg').length;x++){
var el = document.querySelectorAll('.loadImg')[x];
//如果是首屏显示的图片
if (el.offsetTop < availHeight) {
var imgUrl = el.dataset.url;
var img = new Image();
img.src = imgUrl;
img.onload = (function (e) {
el.src = el.dataset.url;
// 加载结束删除data-url
el.removeAttribute('data-url');
})();
} else {
break;
}
}
},
bindScroll: function () {
// 设备可用高度
var availHeight = window.screen.availHeight;
// 滚动的高度
var scrollHeight = document.documentElement.scrollTop;
// 距img元素显露出的距离
var diff = 50;
// 判断如果显示出来了#two
for (var x = 0; x < document.querySelectorAll('.loadImg').length; x++) {
var el = document.querySelectorAll('.loadImg')[x];
// img距顶部的高度
var contentTop = el.offsetTop;
// 判断此时显示出img
if (scrollHeight + diff > contentTop - availHeight) {
if (el.hasAttribute('data-url')) {
var imgUrl = el.getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function () {
el.src = el.getAttribute('data-url');
// 加载结束删除data-url
el.removeAttribute('data-url');
})();
}
}
}
}
};
loadImg.init();
</script>完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>图片懒加载</title>
</head>
<style>
*{margin: 0;padding: 0;}
img{width: 48%;height: 150px;display: inline;border: 1px solid #ccc;}
</style>
<body>
<div>
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/2.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/3.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/4.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/5.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/1.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/6.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/7.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/8.jpg" src="img/2.png" alt="">
<img class="loadImg" data-url="img/2.jpg" src="img/2.png" alt="">
</div>
<script>
/*
* init() 在初始化时调用
*
* firstLoad() 是首次进入页面加载图片的方法
*
* bindScroll() 是绑定滚动
* */
var loadImg = {
init: function () {
this.firstLoad();
var self = this;
window.onscroll = function () {
self.bindScroll();
};
},
firstLoad: function () {
//设备可用高度
var availHeight = window.screen.availHeight;
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('.loadImg').length;x++){
var el = document.querySelectorAll('.loadImg')[x];
//如果是首屏显示的图片
if (el.offsetTop < availHeight) {
var imgUrl = el.dataset.url;
var img = new Image();
img.src = imgUrl;
img.onload = (function (e) {
el.src = el.dataset.url;
el.removeAttribute('data-url');
})();
} else {
break;
}
}
},
bindScroll: function () {
// 设备可用高度
var availHeight = window.screen.availHeight;
// 滚动的高度
var scrollHeight = document.documentElement.scrollTop;
// 距img元素显露出的距离
var diff = 50;
// 判断如果显示出来了#two
for (var x = 0; x < document.querySelectorAll('.loadImg').length; x++) {
var el = document.querySelectorAll('.loadImg')[x];
// img距顶部的高度
var contentTop = el.offsetTop;
// 判断此时显示出img
if (scrollHeight + diff > contentTop - availHeight) {
if (el.hasAttribute('data-url')) {
var imgUrl = el.getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function () {
el.src = el.getAttribute('data-url');
el.removeAttribute('data-url');
})();
}
}
}
}
};
loadImg.init();
</script>
</body>
</html>
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>图片懒加载</title>
</head>
<body>
<div>
<img class="loadImg" data-url="https://www.baidu.com/img/bd_logo1.png" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">
的照片，这也是机器学习。每次您阅读您的电子邮件垃圾邮件筛选器，可以帮你过滤大量的垃圾邮件这也是一种学习算法。对我来说，我感到激动的原因之一是有一天做出一个和人类一样聪明的机器。实现这个想法任重而道远，许多AI研究者认为，实现这个目标最好的方法是通过让机器试着模仿人的大脑学习我会在这门课中介绍一点这方面的内容。
在这门课中，你还讲学习到关于机器学习的前沿状况。但事实上只了解算法、数学并不能解决你关心的实际的问题。所以，我们将花大量的时间做练习，从而你自己能实现每个这些算法，从而了解内部机理。
那么，为什么机器学习如此受欢迎呢？原因是，机器学习不只是用于人工智能领域。
我们创造智能的机器，有很多基础的知识。比如，我们可以让机器找到A与B之间的最短路径，但我们仍然不知道怎么让机器做更有趣的事情，如web搜索、照片标记、反垃圾邮件。我们发现，唯一方法是让机器自己学习怎么来解决问题。所以，机器学习已经成为计算机的一个能力。
现在它涉及到各个行业和基础科学中。我从事于机器学习，但我每个星期都跟直升机飞行员、生物学家、很多计算机系统程序员交流（我在斯坦福大学的同事同时也是这样）和平均每个星期会从硅谷收到两、三个电子邮件，这些联系我的人都对将学习算法应用于他们自己的问题感兴趣。这表明机器学习涉及的问题非常广泛。有机器人、计算生物学、硅谷中大量的问题都收到机器学习的影响。
这里有一些机器学习的案例。比如说，数据库挖掘。机器学习被用于数据挖掘的原因之一是网络和自动化技术的增长，这意味着，我们有史上最大的数据集比如说，大量的硅
<img class="loadImg" data-url="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">
实上，如果你看过自然语言处理或计算机视觉，这些语言理解或图像理解都是属于AI领域。大部分的自然语言处理和大部分的计算机视觉，都应用了机器学习。学习算法还广泛用于自定制程序。每次你去亚马逊或Netflix或iTunes Genius，它都会给出其他电影或产品或音乐的建议，这是一种学习算法。仔细想一想，他们有百万的用户；但他们没有办法为百万用户，编写百万个不同程序。软件能给这些自定制的建议的唯一方法是通过学习你的行为，来为你定制服务。
最后学习算法被用来理解人类的学习和了解大脑。
我们将谈论如何用这些推进我们的AI 梦想。几个月前，一名学生给我一篇文章关于最顶尖的12个IT技能。拥有了这些技能HR绝对不会拒绝你。这是稍显陈旧的文章，但在这个列表最顶部就是机器学习的技能。
在斯坦福大学，招聘人员联系我，让我
<img class="loadImg" data-url="https://www.baidu.com/img/bd_logo1.png" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">
这种Email客户端中，你点击“垃圾邮件”按钮，报告某些Email为垃圾邮件，不会影响别的邮件。基于被标记为垃圾的邮件，您的电子邮件程序能更好地学习如何过滤垃圾邮件。请问，在这个设定中，任务T是什么？几秒钟后，该视频将暂停。当它暂停时，您可以使用鼠标，选择这四个单选按钮中的一个，让我知道这四个，你所认为正确的选项。它可能是性能度量值P。所以，以性能度量值P为标准，这个任务的性能，也就是这个任务T的系统性能，将在学习经验E后得到提高。
本课中，我希望教你有关各种不同类型的学习算法。目前存在几种不同类型的学习算法。主要的两种类型被我们称之为监督学习和无监督学习。在接下来的几个视频中，我会给出这些术语的定义。这里简单说两句，监督学习这个想法是指，我们将教计算机如何去完成任务，而在无监督学习中，我们打算让它自己进行学习。如果对这两个术语仍一头雾水，请不要担心，在后面的两个视频中，我会具体介绍这两种学习算法。此外你将听到诸如，强化学习和推荐系统等各种术语。这些都是机器学习算法的一员，以后我们都将介绍到，但学习算法最常用两个类型就是监督学习、无监督学习。我会在接下来的两个视频中给出它们的定义。本课中，我们将花费最多的精力来讨论这两种学习算法。而另一个会花费大量时间的任务是了解应用学习算法的实用建议。
我非常注重这部分内容，实际上，就这些内容而言我不知道还有哪所大学会介绍到。给你讲授学习算法就好像给你一套工具，相比于提供工具，可能更重要的，是教你如何使用这些工具。我喜欢把这比喻成学习当木匠。想象一下，某人教你如何成为一名木匠，说这是锤子，这是螺丝刀，锯子，祝你好运，再见。这种教法不好，不是吗？你拥有这些工具，但更重要的是，你要学会如何恰当地使用这些工具。会用与不会用的人之间，存在着鸿沟。尤其是知道如何使用这些机器学习算法的，与那些不知道如何使用的人。在硅谷我住的地方，当我走访不同的公司，即使是最顶尖的公司，很多时候我都看到人们试图将机器学习算法应用于某些问题。有时他们甚至已经为此花了六个月之久。但当我看着他们所忙碌的事情时，我想说，哎呀，我本来可以在六个月前就告诉他们，他们应该采取一种学习算法，稍加修改进行使用，然后成功的机会绝对会高得多所以在本课中，我们要花很多时间来探讨，如果你真的试图开发机器学习系统，探讨如何做出最好的实践类型决策，才能决定你的方式来构建你的系统，这样做的话，当你运用学习算法时，就不太容易变成那些为寻找一个解决方案花费6个月之久的人们的中一员。他们可能已经有了大体的框架，只是没法正确的工作于是这就浪费了六个月的时间。所以我会花很多时间来教你这些机器学习、人工智能的最佳实践以及如何让它们工作，我们该如何去做，硅谷和世界各地最优秀的人是怎样做的。我希望能帮你成为最优秀的人才，通过了解如何设计和构建机器学习和人工智能系统。
这就是机器学习，这些都是我希望讲授的主题。在下一个视频里，我会定义什么是监督学习，什么是无监督学习。此外，探讨何时使用二者。
1.3 监督学习
参考视频: 1 - 3 - Supervised Learning (12 min).mkv
在这段视频中，我要定义可能是最常见一种机器学习问题：那就是监督学习。我将在后面正式定义监督学习。
我们用一个例子介绍什么是监督学习把正式的定义放在后面介绍。假如说你想预测房价。
前阵子，一个学生从波特兰俄勒冈州的研究所收集了一些房价的数据。你把这些数据画出来，看起来是这个样子：横轴表示房子的面积，单位是平方英尺，纵轴表示房价，单位是千美元。那基于这组数据，假如你有一个朋友，他有一套750平方英尺房子，现在他希望把房子卖掉，
<img class="loadImg" data-url="https://img-blog.csdn.net/20180803140406969?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lsbHVzaW9uX21lbG9keQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">我们来看一组数据：这个数据集中，横轴表示肿瘤的大小，纵轴上，我标出1和0表示是或者不是恶性肿瘤。我们之前见过的肿瘤，如果是恶性则记为1，不是恶性，或者说良性记为0。
我有5个良性肿瘤样本，在1的位置有5个恶性肿瘤样本。现在我们有一个朋友很不幸检查出乳腺肿瘤。假设说她的肿瘤大概这么大，那么机器学习的问题就在于，你能否估算出肿瘤是恶性的或是良性的概率。用术语来讲，这是一个分类问题。
分类指的是，我们试着推测出离散的输出值：0或1良性或恶性，而事实上在分类问题中，输出可能不止两个值。比如说可能有三种乳腺癌，所以你希望预测离散输出0、1、2、3。0 代表良性，1 表示第1类乳腺癌，2表示第2类癌症，3表示第3类，但这也是分类问题。
因为这几个离散的输出分别对应良性，第一类第二类或者第三类癌症，在分类问题中我们可以用另一种方式绘制这些数据点。
现在我用不同的符号来表示这些数据。既然我们把肿瘤的尺寸看做区分恶性或良性的特征，那么我可以这么画，我用不同的符号来表示良性和恶性肿瘤。或者说是负样本和正样本现在我们不全部画X，良性的肿瘤改成用 O 表示，恶性的继续用 X 表示。来预测肿瘤的恶性与否。
在其它一些机器学习问题中，可能会遇到不止一种特征。举个例子，我们不仅知道肿瘤的尺寸，还知道对应患者的年龄。在其他机器学习问题中，我们通常有更多的特征，我朋友研究这个问题时，通常采用这些特征，比如肿块密度，肿瘤细胞尺寸的一致性和形状的一致性等等，还有一
<img class="loadImg" data-url="https://img-blog.csdn.net/20180803142258686?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lsbHVzaW9uX21lbG9keQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">顾一下，这节课我们介绍了监督学习。其基本思想是，我们数据集中的每个样本都有相应的“正确答案”。再根据这些样本作出预测，就像房子和肿瘤的例子中做的那样。我们还介绍了回归问题，即通过回归来推出一个连续的输出，之后我们介绍了分类问题，其目标是推出一组离散的结果。
现在来个小测验：假设你经营着一家公司，你想开发学习算法来处理这两个问题：
你有一大批同样的货物，想象一下，你有上千件一模一样的货物等待出售，这时你想预测接下来的三个月能卖多少件？
你有许多客户，这时你想写一个软件来检验每一个用户的账户。对于每一个账户，你要判断它们是否曾经被盗过？
那这两个问题，它们属于分类问题、还是回归问题?
问题一是一个回归问题，因为你知道，如果我有数千件货物，我会把它看成一个实数，一个连续的值。因此卖出的物品数，也是一个连续的值。
<img class="loadImg" data-url="https://img-blog.csdn.net/20180803142416202?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lsbHVzaW9uX21lbG9keQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">恶性了。
在无监督学习中，我们已知的数据。看上去有点不一样，不同于监督学习的数据的样子，即无监督学习中没有任何的标签或者是有相同的标签或者就是没标签。所以我们已知数据集，却不知如何处理，也未告知每个数据点是什么。别的都不知道，就是一个数据集。你能从数据中找到某种结构吗？针对数据集，无监督学习就能判断出数据有两个不同的聚集簇。这是一个，那是另一个，二者不同。是的，无监督学习算法可能会把这些数据分成两个不同的簇。所以叫做聚类算法。事实证明，它能被用在很多地方。
聚类应用的一个例子就是在谷歌新闻中。如果你以前从来没见过它，你可以到这个URL网址news.google.com去看看。谷歌新闻每天都在，收集非常多，非常多的网络的新闻内容。它再将这些新闻分组，组成有关联的新闻。所以谷歌新闻做的就是搜索非常多的新闻事件，自动地把它们聚类到一起。所以，这些新闻事件全是同一主题的，所以显示到一起。
事实证明，聚类算法和无监督学习算法同样还用在
<img class="loadImg" data-url="https://img-blog.csdn.net/20180803143608865?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lsbHVzaW9uX21lbG9keQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">所以这个就是无监督学习，因为我们没有提前告知算法一些信息，比如，这是第一类的人，那些是第二类的人，还有第三类，等等。我们只是说，是的，这是有一堆数据。我不知道数据里面有什么。我不知道谁是什么类型。我甚至不知道人们有哪些不同的类型，这些类型又是什么。但你能自动地找到数据中的结构吗？就是说你要自动地聚类那些个体到各个类，我没法提前知道哪些是哪些。因为我们没有给算法正确答案来回应数据集中的数据，所以这就是无监督学习。
无监督学习或聚集有着大量的应用。它用于组织大型计算机集群。我有些朋友在大数据中心工作，那里有大型的计算机集群，他们想解决什么样的机器易于协同地工作，如果你能够让那些机器协同工作，你就能让你的数据中心工作得更高效。第二种应用就是社交网络的分析。所以已知你朋友的信息，比如你经常发email的，或是你Facebook的朋友、谷歌+圈子的朋友，我们能否自动地给出朋友的分组呢？即每组里的人们彼此都熟识，认识组里的所有人？还有市场分割。许多公司有大型的数据库，存储消费者信息。所以，你能检索这些顾客数据集，自动地发现市场分类，并自动地把顾客划分到不同的细分市场中，你才能自动并更有效地销售或不同的细分市场一起进行销售。这也是无监督学习，因为我们拥有所有的顾客数据，但我们没有提前知道是什么的细分市场，以及分别有哪些我们数据集中的顾客。我们不知道谁是在一号细分市场，谁在二号市场，等等。那我们就必须让算法从数据中发现这一切。最后，无监督学习也可用于天文数据分析，这些聚类算法给出了令人惊讶、有趣、有用的理论，解释了星系是如何诞生的。这些都是聚类的例子，聚类只是无监督学习中的一种。
我现在告诉你们另一种。我先来介绍鸡尾酒宴问题。嗯，你参加过鸡尾酒宴吧？你可以想像下，有个宴会房间里满是人，全部坐着，都在聊天，这么多人同时在聊天，声音彼此重叠，因为每个人都在说话，同一时间都在说话，你几乎听不到你面前那人的声音。所以，可能
<img class="loadImg" data-url="https://puui.qpic.cn/tv/0/712571426_498280/0" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">，我会教你们一点关于如何使用Octave的知识，你就可以用Octave来实现一些算法了。或者，如果你有Matlab（盗版？），你也可以用Matlab。事实上，在硅谷里，对大量机器学习算法，我们第一步就是建原型，在Octave建软件原型，因为软件在Octave中可以令人难以置信地、快速地实现这些学习算法。这里的这些函数比如SVM（支持向量机）函数，奇异值分解，Octave里已经建好了。如果你试图完成这个工作，但借助C++或JAVA的话，你会需要很多很多行的代码，并链接复杂的C++或Java库。所以，你可以实现这些算法，借助C++或Java或Python，它只是用这些语言来实现会更加复杂。(编者注：这个是当时的情况，现在Python变主流了)
我已经见到，在我教机器学习将近十年后的现在，发现，学习可以更加高速，如果使用Octave作为编程环境，如果使用Octave作为学习工具，以及作为原型工具，它会让你对学习算法的学习和建原型快上许多。
事实上，许多人在大硅谷的公司里做的其实就是，使用一种工具像Octave来做第一步的学习算法的原型搭建，只有在你已经让它工作后，你才移植它到C++或Java或别的语言。事实证明，这样做通常可以让你的算法运行得比直接用C++实现更快，所以，我知道，作为一名指导者，我必须说“相信我”，但对你们中从未使用过Octave这种编程环境的人，我还是要告诉你们这一点一定要相信我，我想，对你们而言，我认为你们的时间，你们的开发时间是最有价值的资源。我已经见过很多人这样做了，我把你看作是机器学习研究员，或机器学习开发人员，想更加高产的话，你要学会使用这个原型工具，开始使用Octave。
最后，总结下本视频内容，我有个简短的复习题给你们。
我们介绍了无监督学习，它是学习策略，
<img class="loadImg" data-url="https://puui.qpic.cn/vcover_vt_pic/0/mzc00200z2jsuc31583994302749/220" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">发现细分市场。
最后一个例子，糖尿病，这个其实就像是我们的乳腺癌，上个视频里的。只是替换了好、坏肿瘤，良性、恶性肿瘤，我们改用糖尿病或没病。所以我们把这个当作监督学习，我们能够解决它，作为一个监督学习问题，就像我们在乳腺癌数据中做的一样。
好了，以上就是无监督学习的视频内容，在下一个视频中，我们将深入探究特定的学习算法，开始介绍这些算法是如何工作的，和我们还有
<img class="loadImg" data-url="https://puui.qpic.cn/vcover_vt_pic/0/9nl46y9ssa50j0b1561538206/220" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">2.1 模型表示
参考视频: 2 - 1 - Model Representation (8 min).mkv
我们的第一个学习算法是线性回归算法。在这段视频中，你会看到这个算法的概况，更重要的是你将会了解监督学习过程完整的流程。
让我们通过一个例子来开始：这个例子是预测住房价格的，我们要使用一个数据集，数据集包含俄勒冈州波特兰市的住房价格。在这里，我要根据不同房屋尺寸所售出的价格，画出我的数据集。比方说，如果你朋友的房子是1250平方尺大小，你要
<img class="loadImg" data-url="https://puui.qpic.cn/vcover_vt_pic/0/nsgczu8u2kvpe9e1480388656/220" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">就是一个监督学习算法的工作方式，我们可以看到这里有我们的训练集里房屋价格 我们把它喂给我们的学习算法，学习算法的工作了，然后输出一个函数，通常表示为小写 表示。 代表hypothesis(假设)，表示一个函数，输入是房屋尺寸大小，就像你朋友想出售的房屋，因此 根据输入的 值来得出 值， 值对应房子的价格 因此， 是一个从 到 的函数映射。
我将选择最初的使用规则代表hypothesis，因而，要解决房价预测问题，我们实际上是要将训练集“喂”给我们的学习算法，进而学习得到一个假设，然后将我们要预测的房屋的尺寸作为输入变量输入给，预测出该房屋的交易价格作为输出变量输出为结果。那么，对于我们的房价预测问题，我们该如何表达 ？
一种可能的表达方式为：，因为只含有一个特征/输入变量，因此这样的问题叫作单变量线性回归问题。
2.2 代价函数
参考视频: 2 - 2 - Cost Function (8 min).mkv
在这段视频中我们将定义
<img class="loadImg" data-url="https://puui.qpic.cn/vcover_vt_pic/0/bv8m91i5jj1w1ww1574426519/220" src="https://cdn.soarli.top/loading.jpg?x-oss-process=style/soarli" alt="">在线性回归中我们有一个像这样的训练集，代表了训练样本的数量，比如 。而我们的假设函数，也就是用来进行预测的函数，是这样的线性函数形式：。
接下来我们会引入一些术语我们现在要做的便是为我们的模型选择合适的参数（parameters） 和 ，在房价问题这个例子中便是直线的斜率和在 轴上的截距。
我们选择的参数决定了我们得到的直线相对于我们的训练集的准确程度，模型所预测的值与训练集中实际值之间的差距（下图中蓝线所指）就是建模误差（modeling error）。
</div>
<script>
/*
* init() 在初始化时调用
*
* firstLoad() 是首次进入页面加载图片的方法
*
* bindScroll() 是绑定滚动
* */
var loadImg = {
init: function () {
this.firstLoad();
var self = this;
window.onscroll = function () {
self.bindScroll();
};
},
firstLoad: function () {
//设备可用高度
var availHeight = window.screen.availHeight;
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('.loadImg').length;x++){
var el = document.querySelectorAll('.loadImg')[x];
//如果是首屏显示的图片
if (el.offsetTop < availHeight) {
var imgUrl = el.dataset.url;
var img = new Image();
img.src = imgUrl;
img.onload = (function (e) {
el.src = el.dataset.url;
el.removeAttribute('data-url');
})();
} else {
break;
}
}
},
bindScroll: function () {
// 设备可用高度
var availHeight = window.screen.availHeight;
// 滚动的高度
var scrollHeight = document.documentElement.scrollTop;
// 距img元素显露出的距离
var diff = 50;
// 判断如果显示出来了#two
for (var x = 0; x < document.querySelectorAll('.loadImg').length; x++) {
var el = document.querySelectorAll('.loadImg')[x];
// img距顶部的高度
var contentTop = el.offsetTop;
// 判断此时显示出img
if (scrollHeight + diff > contentTop - availHeight) {
if (el.hasAttribute('data-url')) {
var imgUrl = el.getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function () {
el.src = el.getAttribute('data-url');
el.removeAttribute('data-url');
})();
}
}
}
}
};
loadImg.init();
</script>
</body>
</html>方法二：使用Echo.js（5.25补充）
无意间在CCTV官网看到了另一种懒加载方法，经过参数调整刚好实现了弥补方法一手机屏幕如果页面底部有图片真实图片无法加载的漏洞。
Github：https://github.com/toddmotto/echo
文件备份：echo-master.zip
使用方法：
<body>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="http://p5.img.cctvpic.com/photoAlbum/templet/common/DEPA1381197220279381/loading.gif" alt="Photo" data-echo="https://p5.img.cctvpic.com/photoworkspace/2020/05/20/2020052013394288064.jpg">
<script src="dist/echo.js"></script>
<script>
echo.init({
offset: 0,
throttle: 0,
unload: false,
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
// echo.render(); is also available for non-scroll callbacks
</script>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="http://p5.img.cctvpic.com/photoAlbum/templet/common/DEPA1381197220279381/loading.gif" alt="Photo" data-echo="https://p2.img.cctvpic.com/photoworkspace/2020/05/18/2020051809342593222.jpg">
</body>参数说明：
offset：离可视区域多少像素的图片可以被加载throttle：图片延迟多少毫秒加载unload：查阅官方文档得知用以控制页面离开视线是否释放图像，默认设置为false，否则图片会随着重复滚动至可见区域（当然在offset为0前提下）重复请求/加载
方法三：方法二的简化版/旧版
这个方法应该能算是CCTV同款了，参考了简书大佬的文章：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="echo.min.js"></script>
</head>
<body>
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="http://p5.img.cctvpic.com/photoAlbum/templet/common/DEPA1381197220279381/loading.gif" alt="Photo" data-echo="https://p5.img.cctvpic.com/photoworkspace/2020/05/20/2020052013394288064.jpg">
<h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1><h1>123</h1>
<img src="http://p5.img.cctvpic.com/photoAlbum/templet/common/DEPA1381197220279381/loading.gif" alt="Photo" data-echo="https://p2.img.cctvpic.com/photoworkspace/2020/05/18/2020051809342593222.jpg">
<script>
Echo.init({
offset: 0,
throttle: 0
});
</script>
</body>
</html>echo.min.js
/*!
* Echo v1.4.0
* Lazy-loading with data-* attributes, offsets and throttle options
* Project: https://github.com/toddmotto/echo
* by Todd Motto: http://toddmotto.com
* Copyright. MIT licensed.
*/
window.Echo = (function(window, document, undefined) {
'use strict';
var store = [],
offset,
throttle,
poll;
var _inView = function(el) {
var coords = el.getBoundingClientRect();
return ((coords.top >= 0 && coords.left >= 0 && coords.top) <= (window.innerHeight || document.documentElement.clientHeight) + parseInt(offset));
};
var _pollImages = function() {
for (var i = store.length; i--;) {
var self = store[i];
if (_inView(self)) {
self.src = self.getAttribute('data-echo');
store.splice(i, 1);
}
}
};
var _throttle = function() {
clearTimeout(poll);
poll = setTimeout(_pollImages, throttle);
};
var init = function(obj) {
var nodes = document.querySelectorAll('[data-echo]');
var opts = obj || {};
offset = opts.offset || 0;
throttle = opts.throttle || 250;
for (var i = 0; i < nodes.length; i++) {
store.push(nodes[i]);
}
_throttle();
if (document.addEventListener) {
window.addEventListener('scroll', _throttle, false);
} else {
window.attachEvent('onscroll', _throttle);
}
};
return {
init: init,
render: _throttle
};
})(window, document);灵感来源：
https://blog.csdn.net/ForMyQianDuan/article/details/49131053
https://blog.csdn.net/illusion_melody/article/details/81386120
https://blog.csdn.net/qq_36157085/article/details/88556107
https://blog.csdn.net/github_37125043/article/details/72174017
http://news.cctv.com/world/?spm=C94212.PGZDd8bkBJCZ.0.0
view-source:http://news.cctv.com/tech/?spm=C94212.PBZrLs0D62ld.0.0
http://p1.img.cctvpic.com/photoAlbum/templet/common/DEPA1546583592748817/echo.js
https://github.com/toddmotto/echo
https://www.ctolib.com/topics/83805.html
https://www.cnblogs.com/agansj/p/8909794.html
https://www.jianshu.com/p/91886c00c914
版权属于：soarli
本文链接：https://blog.soarli.top/archives/325.html
转载时须注明出处及本声明。
