懒加载

作者: Eazer | 来源:发表于2017-07-09 03:41 被阅读0次

1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现

function isVisible($node){
var windowHeight = $(window).height()  //窗口的高度
var scrollTop = $(window).scrollTop()  //滚动条垂直高度
var offsetTop = $node.offset().top   // 元素偏移位置

if((offsetTop > scrollTop) && (offsetTop<(scrollTop + windowHeight))){
    return true
}
    return false
}

2.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

$(window).on('scroll',function result(){
    if(isVisible($node)){
        console.log(true)
    }else{
        console.log(false)
    }
})

function isVisible($node){
    var windowHeight = $(window).height()
    var scrollTop = $(window).scrollTop()
    var offsetTop = $node.offset().top
    if((offsetTop > scrollTop) && (offsetTop < (scrollTop + windowHeight))){
        return true
    }
        return false
}

3.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现

function logVisible($node){
    $(window).on('srcoll',function(){
        var scrollTop = $(this).scrollTop()
        var windowHeight = $(this).height()
        var offsetTop = $node.offset().top()
        if((offsetTop > scrollTop) && (offsetTop < (scrollTop + windowHeight))){
            if($node,data('visible')){
                return
            }
            $node.data('visible',true)
            console.log('true')
        }else{
            $node.data('visible',false)
        }
    })
}

logVisible($('node'))

4.图片懒加载的原理是什么?

为了整体网站的性能考虑,是一种延时加载图片的方法。把图片真实的URL 放在data-img的值中,当图片进入可视区域的瞬间把data-img赋给src。

【个人总结,如有错漏,欢迎指出】
:>

相关文章

  • iOS开发,懒加载

    什么是懒加载? 懒加载--比较懒的加载方式,需要的时候才加载,也称为延时加载。 所谓懒加载既是重写get方法,一定...

  • iOS开发UI篇-懒加载、重写setter方法赋值

    一、懒加载 1.懒加载定义 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的...

  • Fragment结合ViewPager之懒加载

    什么是懒加载?为什么要用懒加载?### 1、什么是懒加载 懒加载就是当ViewPager和Fragment结合在一...

  • iOS懒加载注意事项

    懒加载 1.懒加载 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小)。所谓懒加载,写的是其ge...

  • web优化之懒加载和预加载

    懒加载和预加载是常用的web优化的手段。所以我们首先应该明白什么是懒加载和预加载。懒加载:懒加载也加延迟加载,延迟...

  • fragment 懒加载

    fragment 的懒加载 懒加载 什么是懒加载:只有在 fragment 显示在界面的时候,才进行数据的加载 懒...

  • 懒加载和预加载

    懒加载和预加载 1. 懒加载 1. 什么是懒加载? 懒加载也就是延迟加载 当访问一个页面的时候,先把img元素或是...

  • Android 懒加载优化

    目录介绍 1.什么是懒加载1.1 什么是预加载1.2 懒加载介绍1.3 懒加载概括 2.实际应用中有哪些懒加载案例...

  • Swift语法点

    1 懒加载 懒加载与OC中的懒加载的区别:懒加载的类一旦 设置为nil 后, 懒加载就不会再次执行,与OC中不同,...

  • UICollectionView

    UICollectionViewFlowLayout懒加载 UICollectionView懒加载 注册item ...

网友评论

    本文标题:懒加载

    本文链接:https://www.haomeiwen.com/subject/ckmchxtx.html