一、为什么写这篇博客？
被逼的！！！哎、天天学习总感觉学不过来，知识太多了。前端是一个分秒飞速发展的过程，知识更新太快，好的作品陆续的出现，让我都喘不过气来了。这都是我小生的一些废话啦，回到主题吧！（return）。
二、页面滚动加载图片的理解：
我们知道当一个网页含有大量图片的时候，往往加载时间都会很慢，这里不考虑服务器多好，网速多块哈。如淘宝京东等大型电商网站。新闻类就是新浪等了。你可以想象一下，如果一下加载整个网页的所有图片，那会是一个缓慢的过程。在现今我们对知识的渴望性的的增加额，总想最快的浏览网页。所以这个时候我们就需要用到滚动时时加载的方法了！
三、实现思路：
或许在你看见这个题目的时候，你就在思考怎么来实现了。。。没错就是你想的那样！“开始不给它放图片，等滚动到哪里的时候再获取！”但是问题出现了：我们知道如果在 src 中你不放入正确的图片地址。那么有的浏览器就会出现一个小红色的叉叉（×）图标。（这里你应该知道说的谁了哈）这样肯定是不行的。
（1）所以必须是一个对的url地址。我们就用一张一像素的图片作为初始图片。
（2）在滚动到图片出现在浏览器的可视范围时，在动态替换图片的url地址，这里的动态指的是使用js替换！
如下：
<img data-url="img/4.png" src="img/pix.png" />这里的pix.png就是一张一像素的图片！至于 data-url 这是html5的新属性吧。你只需要知道怎样获得里面的值就对了。方法如下：（这里使用jquery）
$('img ').data('url'); //使用 data（）方法获得里面的数据解决了这两个问题，那么就简单了，接下来就看怎么实现吧。
四、需要你知道的？
1、怎样获得浏览器的可视高度？
var windHight = $(window).height(); //获得浏览器的可视高度 2、怎样获得滚动条相对于顶部的高度？
var scrollHight = $(window).scrollTop();//获得滚动条相对于顶部的高度 3、怎样获得每张图片相对于浏览器顶部的高度？
var imgHight = $('img').offset().top; //获得每张图片相对于顶部的高度4、怎样判断图片出现在了浏览器的可视窗口内部？
imgHight - windHight < scrollHight ? '成立的话就代表出现了' ： '不成立就代表没出现';5、怎样排除首屏的图片？
imgHight - windHight > 0 //排除首屏的图片 6、排除已经加载过的图片
$(this).attr('src') != $(this).data('url') //排除已经加载过的图片 好了这样基本实现了！
五、效果分析：
看出结果了吧！实现了滚动加载的效果而且不会出现重复加载的情况！下面看浏览器的请求：
看到这里也就基本完结了！最后贴出自己的代码这个代码看起我觉得很好理解，但是可能在性能上会有不足，还请你来提出意见！先谢谢了。
温柔点击这里：在线演示滚动加载图片
看代码：
$(function(){
var $wd = $(window),
$img = $('img'),
imgTop, //图片距离顶部高度
scTop, //滚动条高度
wH; //窗口高度
wH = $wd.height(); //获得可视浏览器的高度
$wd.scroll( function() {
scTop = $wd.scrollTop(); //获取滚动条到顶部的垂直高度
$img.each(function(){
imgTop = $(this).offset().top;
if(imgTop - wH < scTop && //图片必须出现在窗口底部上面
imgTop - wH > 0 && //排除首页图片
$(this).attr('src') != $(this).data('url')){ //排除已经加载过的图片
$(this).attr({
src: $(this).data('url')
});
}
});
});
}); 完整代码下载，请温柔点击这里：源码下载
思考：
问题出来，这里虽然是我直接排除的首屏图片，但是不同的电脑高度不一样，那么怎么来实现呢？两种解决方法：
一、所有的图片初始都使用一像素的图片，用 load 事件遍历图片再显示。（缺点效率低）
二、按照最大的显示视频计算初始高度，及最开始在首页中多写入几张进去。（相对好点）
（本篇完）
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
