图片懒加载及资源节流

//懒加载
    //保存图片路径
    // 给待加载图片一张默认图
    //使用data-src属性保存图片的真正地址
    //监听页面scroll事件
    // 手机当前进入页面的图片元素
    // 给src赋值真正地址
    //已加载的给加标记
    //函数节流，滚动性能提升

    //生成图片节点
    function genLazyImg(){var str = '';for(var i = 1 ;i < 11;i++){var name = 'img/scr'+i+'.jpg';var img = '<li class="item"><img data-src="'+name+'"' +
                ' src="img/zh.jpg" /></li>';str+=img;}return str;}//加载窗口中的图片
    function loadImg(){//这些变量可以外提
        var winHeight = $(window).height();var imgItems = $('ul img');imgItems.each(function(index,img){var $img = $(img);//判断是否在屏幕可视区
            var top = img.getBoundingClientRect().top;if(top <= winHeight){if($img.data('load') == 1)return;$img.attr('src',$img.data('src'));$img.data('load',1)}})}var imgs = genLazyImg();$('ul').html(imgs);//
//    $(window).scroll(function () {
//        console.log('scroll')
//        loadImg()
//    })

    //对scroll事件函数节流 新能优化
    //经常用的方法为以下这个方法throttle，也可以了解debounce
    //来降低函数的调用频率
    function throttle(fn,delay,scope){//时间间隔250s
        delay || (delay = 250);var last,deferTimer;return function () {var context = scope || this ;var now = +new Date();args = arguments;done_fn = function (immediate) {last = immediate ? now : +new Date();deferTimer = null ;fn.apply(context,args);};if(last === undefined || (now - last) >= delay){clearTimeout(deferTimer);return done_fn(true);}//deferTimer !===null 就会组织一次动作结束后，新的一轮动作在结束时，应该会有一次动作的行为
            deferTimer === null && (deferTimer = setTimeout(done_fn,delay))}}var lazyLoad = throttle(function () {console.log('scroll');loadImg()})$(window).scroll(function () {lazyLoad()
    })

函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。两个方法都是用来提升前端性能，减轻浏览器压力。这两个方法适用于会重复触发的一些事件，如：mousemove，keydown，keyup，keypress，scroll等。如果只绑定原生事件，不加以控制，会使得浏览器卡顿，用户体验差。为了提高js性能，建议在使用以上及类似事件的时候用函数节流或者函数去抖加以控制。

function debounce(fn, delay) {    var timer = null;   return function () {         var context = this, args = arguments;          clearTimeout(timer);         timer = setTimeout(function () {                 fn.apply(context, args);            }, delay);   };}
$('input.username').keypress(debounce(function (event) {

   // do the Ajax request}, 250)

);

图片懒加载及资源节流相关推荐

“懒”的妙用——浅析图片懒加载技术
1.定义图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
document引用图片的src属性能干嘛_如何实现图片懒加载
背景图片懒加载是针对图片加载时机的一种优化,在一些图片量比较大的网站(比如电商网站首页,或者团购网站.小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白 ...
vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
JQuery实现网页图片懒加载
使用img标签加载图片,在网页上显示图片,这里就简单的设置一下样式了,主要目的是展示图片的不同加载方式. 1.普通实现方式普通的实现方式就是不做任何处理,需要使用到图片时就去加载图片,这些图片一般存 ...
图片懒加载的原理和实现
一,前置知识 1,为什么要图片懒加载懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资 ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？
一.与image组件有关的技术问题 1.1 什么是WebP? webp是image组件的一个boolean属性,开启这个属性之后,代表url可以设置webp这种格式的图片.webP是一种同时提供了有损 ...
iframe懒加载_如何实现图片懒加载
背景图片懒加载是针对图片加载时机的一种优化,在一些图片量比较大的网站(比如电商网站首页,或者团购网站.小游戏首页等),如果我们尝试在用户打开页面的时候,就把所有的图片资源加载完毕,那么很可能会造成白 ...
html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介什么是图片懒加载懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
懒加载实践--js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...

图片懒加载及资源节流

图片懒加载及资源节流相关推荐

最新文章

热门文章