精华内容
下载资源
问答
  • 懒加载和预加载区别

    2018-03-10 17:30:00
    懒加载:使用到的时候在加载 比如滚动加载图片 原理:图片的src属性如果不设置,浏览器就不会发出请求,,路径放在data-src中,然后根据内容是否出现在了可是区域,出现在了可是区域,则吧data-src中的值仿放入src...

    懒加载:使用到的时候在加载

    比如滚动加载图片

    原理:图片的src属性如果不设置,浏览器就不会发出请求,,路径放在data-src中,然后根据内容是否出现在了可是区域,出现在了可是区域,则吧data-src中的值仿放入src中。

    预加载:预先加载

     

    可以使用css js和ajax都可以,原理是在onload函数中使用append script和css或者图片是用背景图片或者new Image append到页面中。

     

    转载于:https://www.cnblogs.com/mttcug/p/8540836.html

    展开全文
  • 懒加载和预加载的实现提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以及实现懒加载什么是懒加载懒加载也就是延迟加载;当访问一个页面时,先将...

    懒加载和预加载的实现

    提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以及实现

    懒加载

    什么是懒加载

    懒加载也就是延迟加载;当访问一个页面时,先将img标签中的src链接设为同一张图片(这样就只需请求一次,俗称占位图),将其真正的图片地址存储在img标签的自定义属性中(比如data-src);当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果;这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢页面卡顿或崩溃等问题

    为什么要使用懒加载

    懒加载对于图片较多页面很长的业务场景很适用,可以减少无效资源的加载

    懒加载的实现步骤

    首先,不要将图片地址放到src属性中,而是放到其它属性(data-src)中

    页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中

    在滚动事件中重复判断图片是否进入视野;如果进入,则将data-original属性中的值取出存放到src属性中

    代码实现

    既然懒加载的原理是基于判断元素是否出现在窗口可视范围内,首先我们写一个函数判断元素是否出现在可视范围内:

    function isVisible($node){

    var winH = $(window).height(),

    scrollTop = $(window).scrollTop(),

    offSetTop = $(window).offSet().top;

    if (offSetTop < winH + scrollTop) {

    return true;

    } else {

    return false;

    }

    }

    再添加上浏览器的事件监听函数,让浏览器每次滚动就检查元素是否出现在窗口可视范围内:

    $(window).on("scroll", function{

    if (isVisible($node)){

    console.log(true);

    }

    })

    现在我们要做的是,让元素只在第一次被检查到时打印true,之后就不再打印了

    var hasShowed = false;

    $(window).on("sroll",function{

    if (hasShowed) {

    return;

    } else {

    if (isVisible($node)) {

    hasShowed = !hasShowed;

    console.log(true);

    }

    }

    })

    这样我们就实现了懒加载。利用懒加载和AJAX,我们还可以实现无限滚动查看时间线,在滚动页面一段距离后出现回到顶部按钮的效果

    懒加载的优点

    显著的提高页面加载速度,又不下载多余的资源节省了流量;同时更少的图片并发请求数也可以减轻服务器的压力

    懒加载插件

    关于图片延时加载,网上有很多应用的例子以及插件;目前研究过的两个插件分别是jquery插件lazyload.js和原生js插件echo.js;二者的区别不用说,jquery插件使用的时候必须引入jquery才可以,且该插件功能强大,灵活性也高;而echo.js是用原生写的插件,代码少,不依赖其他库,拿起来就可以用,但能够实现的效果不如lazyload丰富强大,但基本的延时加载要求都能满足。

    jquery.lazyload.js

    如何使用

    延迟加载依赖于于jQuery,第一步引入文件:

    接下来修改html的一些属性:图像的src地址暂时存储在自定义属性data-original中,然后给需要延时加载图像加上一个特定的类,类的名字由你自己决定,使用的时候统一类名即可;为这些图片绑定延时加载:

    example.jpg

    用的时候就像下面:

    $("img.lazy").lazyload();

    所有class为lazy的图片将被延迟加载。注意:必须设置图像的尺寸,宽度和高度属性或CSS,否则插件可能无法正常工作。

    参数设置

    设置阈值

    默认情况下图片在位于可视区域后才开始加载;如果想提前加载图片,可通过设置threshold的值来改变其显示的时间,设置threshold为200使图片在距离屏幕可见区域下方200像素时就开始加载

    $("img.lazy").lazyload({

    threshold:200

    });

    事件触发加载

    默认是scoll事件触发延时加载,即等到用户向下滚动至图片出现在屏幕可视区域时图片才能加载,但可以使用jQueryclick或mouseover等事件触发图片的加载,也可以使用自定义事件,实现只有当用户点击图片图片才能够加载时可以这样写:

    $("img.lazy").lazyload({

    event : "click"

    });

    注意:你也可以使用这个技巧延迟图片加载,即加载前延迟5秒后再加载图片;就像下面这样(trigger()方法触发被选元素的指定事件类型):

    $(function() {

    $("img.lazy").lazyload({

    event:"click"

    });

    });

    $(window).bind("load", function() {

    var timeout = setTimeout(function() {

    $("img.lazy").trigger("click") //trigger()方法触发被选元素的指定事件类型

    }, 5000);

    });

    使用特殊效果加载图片

    插件默认使用show()方法显示图片;当然你可以使用任何你想用的特效来处理,例如使用fadeIn效果:

    $("img.lazy").lazyload({

    effect : "fadeIn" //.effect()方法对一个元素应用了一个命名的动画 特效

    });

    为非JavaScript浏览器回退

    example.jpg

    example.jpg

    可以通过CSS隐藏占位符

    .lazy {

    display: none;

    }

    在支持JavaScript的浏览器中必须在DOM ready时将占位符显示出来,这可以在插件初始化的同时完成。

    $("img.lazy").show().lazyload();

    这些都是可选的,但如果你希望插件平稳降级这些都是应该做的

    图片内容器

    可以将插件用在可滚动容器的图片上,例如带滚动条的DIV元素;将容器定义为jQuery对象并作为参数传到初始化方法里面

    #container {

    height: 600px;

    overflow: scroll;

    }

    $("img.lazy").lazyload({

    container: $("#container")

    });

    当图像并不是连续的

    滚动页面时,Lazy Load会循环加载图片;在循环中检测图片是否在可视区域内,默认情况下在找到第一张不在可见区域的图片时停止循环;图片被认为是流式分布的,图片在页面中的次序和HTML代码中次序相同;但是在一些布局中,这样的假设是不成立的;不过你可以通过failurelimit选项来控制加载行为

    $("img.lazy").lazyload({

    failure_limit : 10

    });

    将failurelimit设为10令插件找到10个不在可见区域的图片是才停止搜索

    7.处理看不见图像

    可能在你的页面上有很多隐藏的图片;为了提升性能,Lazy Load默认忽略了隐藏图片;如果想要加载隐藏图片,将skip_invisible设为 false:

    $("img.lazy").lazyload({

    skip_invisible : false

    });

    echo.js

    兼容性:Echo.js使用了HTML5的date属性,并且需要获取该属性的值,所以它并不兼容IE6/IE7。使用方法:

    引入文件

    HTML

    pic

    blank.gif用做默认图片,data-echo的属性值是图片的真实地址,同样最好给图片设置宽度和高度

    JavaScript

    echo.init({

    offset: 0,

    throttle: 0

    });

    参数说明

    echo.js只有两个参数:offset和throttle

    offset:设置图片在离可视区域下方在一定距离后开始被加载

    throttle:设置图片延迟多少毫秒后加载

    那么上面的代码的意思就是一旦图片进入可视区域就立即加载。怎么样,使用起来真的很简单吧

    预加载

    什么是预加载

    提前加载图片,当用户需要查看时可直接从本地缓存中渲染

    为什么要使用预加载

    图片预先加载到浏览器中,访问者可顺利地在网站上冲浪,并享受到极快的加载速度;这对图片占据很大比例的网站来说十分有利,保证了图片快速/无缝地发布,也可帮助用户在浏览网站内容时获得更好的用户体验。预加载的核心要点如下:

    图片等静态资源在使用前提前请求;

    资源后续使用时可以从缓存中加载,提升用户体验;

    页面展示的依赖关系维护(必需的资源加载完才可以展示页面,防止白屏等)

    实现预加载主要有三个方法

    用CSS和JavaScript实现预加载

    实现预加载图片有很多方法,包括使用CSS/JavaScript/两者的各种组合,这些技术可根据不同设计场景设计出相应的解决方案,十分高效。

    单纯使用CSS,可容易/高效地预加载图片,代码如下:

    #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }

    #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }

    #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

    将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上;只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片;简单/高效,不需要任何JavaScript。该方法虽然高效,但仍有改进余地;使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间;为了解决这个问题,我们增加了JS代码来推迟预加载的时间,直到页面加载完毕;代码如下:

    function preloader() {

    if (document.getElementById) {

    document.getElementById("preload-01").style.background =

    "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";

    document.getElementById("preload-02").style.background =

    "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";

    document.getElementById("preload-03").style.background =

    "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";

    }

    }

    function addLoadEvent(func) {

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

    window.onload = func;

    } else {

    window.onload = function() {

    if (oldonload) {

    oldonload();

    }

    func();

    }

    }

    }

    addLoadEvent(preloader);

    在脚本的第一部分,我们获取使用类选择器的元素并为其设置了background属性,以预加载不同的图片;脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕;如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可.

    仅使用JavaScript实现预加载

    上述方法有时确实很高效,但我们逐渐发现它在实际实现过程中会耗费太多时间;相反,我更喜欢使用纯JavaScript来实现图片的预加载;下面将提供两种这样的预加载方法,它们可以很漂亮地工作于所有现代浏览器之上

    加载方法1:

    只需简单编辑/加载所需要图片的路径与名称即可,很容易实现:

    该方法尤其适用预加载大量的图片

    加载方法2:

    该方法与上面的方法类似,也可以预加载任意数量的图片;将下面的脚本添加入任何Web页中,根据程序指令进行编辑即可

    正如所见,每加载一个图片都需要创建一个变量,如"img1=new Image();",及图片源地址声明,如"img3.src='../path/to/image-003.gif';";参考该模式,可根据需要加载任意多的图片;我们又对该方法进行了改进,将该脚本封装入一个函数中,并使用addLoadEvent()延迟预加载时间,直到页面加载完毕。

    function preloader() {

    if (document.images) {

    var img1 = new Image();

    var img2 = new Image();

    var img3 = new Image();

    img1.src = "http://domain.tld/path/to/image-001.gif";

    img2.src = "http://domain.tld/path/to/image-002.gif";

    img3.src = "http://domain.tld/path/to/image-003.gif";

    }

    }

    function addLoadEvent(func) {

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

    window.onload = func;

    } else {

    window.onload = function() {

    if (oldonload) {

    oldonload();

    }

    func();

    }

    }

    }

    addLoadEvent(preloader);

    使用Ajax实现预加载

    上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法;该方法利用DOM,不仅仅预加载图片,还会预加载CSS/JavaScript等相关的东西;使用Ajax比直接使用JavaScript优越之处在于JavaScript和CSS的加载不会影响到当前页面;该方法简洁/高效.

    window.onload = function() {

    setTimeout(function() {

    // XHR to request a JS and a CSS

    var xhr = new XMLHttpRequest();

    xhr.open('GET', 'http://domain.tld/preload.js');

    xhr.send('');

    xhr = new XMLHttpRequest();

    xhr.open('GET', 'http://domain.tld/preload.css');

    xhr.send('');

    // preload image

    new Image().src = "http://domain.tld/preload.png";

    }, 1000);

    };

    上面代码预加载了preload.js/preload.css/preload.png

    ,1000毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题;下面我们看看如何用JavaScript来实现该加载过程:

    window.onload = function() {

    setTimeout(function() {

    // reference to

    var head = document.getElementsByTagName('head')[0];

    // a new CSS

    var css = document.createElement('link');

    css.type = "text/css";

    css.rel = "stylesheet";

    css.href = "http://domain.tld/preload.css";

    // a new JS

    var js = document.createElement("script");

    js.type = "text/javascript";

    js.src = "http://domain.tld/preload.js";

    // preload JS and CSS

    head.appendChild(css);

    head.appendChild(js);

    // preload image

    new Image().src = "http://domain.tld/preload.png";

    }, 1000);

    };

    这里,我们通过DOM创建三个元素来实现三个文件的预加载;正如上面提到的那样,使用Ajax加载文件不会应用到加载页面上;从这点上看,Ajax方法优越于JavaScript

    补充知识

    屏幕可视窗口大小

    //原生方法

    window.innerHeight || //标准浏览器及IE9+

    document.documentElement.clientHeight || //标准浏览器及低版本IE标准模式

    document.body.clientHeight //低版本混杂模式

    //jQuery方法

    $(window).height();

    滚动条滚动的距离

    //原生方法

    window.pagYoffset || //标准浏览器及IE9+

    document.documentElement.scrollTop || //兼容ie低版本的标准模式

    document.body.scrollTop //兼容混杂模式;

    //jQuery方法

    $(document).scrollTop();

    获取元素的尺寸

    $(o).width() = o.style.width;

    $(o).innerWidth() = o.style.width+o.style.padding;

    $(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;

    $(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

    注意:

    要使用原生的style.xxx方法获取属性,这个元素必须已经有内嵌的样式,如

    获取元素的位置信息

    //原生方法

    getoffsetTop();

    //jQuery方法

    $(o).offset().top //元素距离文档顶的距离

    $(o).offset().left //元素距离文档左边缘的距离

    // 顺便提一下返回元素相对于第一个以定位的父元素的偏移距离,注意与上面偏移距的区别;

    jQuery:position() //返回一个对象

    $(o).position().left = o.style.left;

    $(o).position().top = o.style.top;

    本文由 创作,采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:

    2020/05/13 00:57

    展开全文
  • 懒加载和预加载

    2018-10-15 14:08:16
    懒加载和预加载 实现预加载的三种方法
    展开全文
  • 懒加载和预加载区别

    万次阅读 2019-12-07 00:03:32
    懒加载 作用 减少无效的资源加载 在哪里使用 电商等图片很多的业务场景 工作原理: 图片进入可视区域之后请求图片资源 预加载 作用 资源使用时能从缓存加载,提升用户体验 在哪里使用 页面展示之间...

    懒加载

    • 作用
      • 减少无效的资源加载
    • 在哪里使用
      • 电商等图片很多的业务场景
    • 工作原理:
      • 图片进入可视区域之后请求图片资源

    预加载

    • 作用
      • 资源使用时能从缓存加载,提升用户体验
    • 在哪里使用
      • 页面展示之间有依赖关系需要维护
    • 工作原理:
      • 图片等静态资源在使用之前提前请求

    未完待续…

    展开全文
  • JavaScript 图片懒加载和预加载 ...懒加载和预加载区别1.概念2.区别3.意义 一.背景 目前各种电商网站层出不穷,大家都知道,电商网站的图片量是非常之多的,其实也不只是电商网站,更有些其他的,图片密集度比
  • 懒加载和预加载的实现

    千次阅读 2018-03-05 17:18:19
    懒加载和预加载的实现提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以及实现懒加载什么是懒加载懒加载也就是延迟加载; 当访问一个页面时,先将...
  • 懒加载和预加载的实现和区别

    千次阅读 2018-07-24 15:22:36
    懒加载 1、什么是懒加载懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的...
  • 图片懒加载和预加载

    2021-04-07 09:57:56
    这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。 2.为什么要用懒加载 能提升用户的体验,不妨设想下,用户...
  • 提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言,说明懒加载和预加载的核心要点以及实现。1.懒加载懒加载的要点如下:1.图片进入可视区域之后请求图片资源;2.对于电商等...
  • 一、懒加载 【1.1】什么是懒加载懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,960
精华内容 5,584
关键字:

懒加载和预加载的区别