任务29
2017-01-18 本文已影响5人
饥人谷_小敏
问答
1、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($elem) {
var srollHeight=$(window).scrollTop(),
windowHeight=$(window).height(),
elemTop=$elem.offset().top;
if(srollHeight+windowHeight>elemTop){
return true;
}else{
return false;
}
}
2、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
var clock;
var $second=$(".second");
$(window).on("scroll",function () {
if(clock){
clearTimeout(clock);
}
clock=setTimeout(function () {
if(isVisible($second)){
alert(true);
}
},200)
})
function isVisible($elem) {
var srollHeight=$(window).scrollTop(),
windowHeight=$(window).height(),
elemTop=$elem.offset().top;
if(srollHeight+windowHeight>elemTop){
return true;
}else{
return false;
}
}
3、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
var clock;
var $second=$(".second");
$(window).on("scroll",function () {
if(clock){
clearTimeout(clock);
}
clock=setTimeout(function () {
checkShow($second);
},200)
})
function checkShow($elem) {
if($elem.attr("isLoaded")){
return;
}
if(isShow($elem)){
$elem.attr("isLoaded",true);
alert(true);
}
}
function isShow($elem) {
var srollHeight=$(window).scrollTop(),
windowHeight=$(window).height(),
elemTop=$elem.offset().top;
if(srollHeight+windowHeight>elemTop){
return true;
}else{
return false;
}
}
4、图片懒加载的原理是什么？
** 什么是图片懒加载：**图片懒加载通常应用于图片比较多的网页。当图片比较多时，浏览器分好几屏才能显示所有图片，在不使用图片懒加载时，页面首次加载，要加载所有图片，因此要发送n多个HTTP请求，影响web性能；而使用图片懒加载技术时，页面初次加载，只加载浏览器可视区域中的图片，即只加载第一屏中的图片，当滚动页面时，再加载将要进入浏览器可视区域的图片。这样可以显著的提高页面的加载速度，提升用户体验；并且更小的并发请求也可以减轻服务器的压力，而且如果用户只浏览首屏的话，还可以节省流量
图片懒加载原理：先为所有的<img>标签的src属性指定同一张空白图片作为占位符（这里设置成空白图片是因为如果将src=" "，某些浏览器可能会出现X，因为每个img地址都是同样的，浏览器会缓存，因此只会加载一次这个图片），然后把图片的真实url存储在自定义的"data-src"属性中，当首次加载页面完成后（onload）或滚动页面(onscroll)时，判断哪些图片将出现在浏览器可视区域，把这些图片的src属性值设置为"data-url"的属性值。
