精华内容
下载资源
问答
  • 加载(延迟加载):延迟...加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。 1.加载: 意义: 加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。 实现方式: 1.第一种是

    懒加载(延迟加载):延迟加载图片或符合某些条件时才加载某些图片。

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

    两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    1.懒加载:

    意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
    实现方式:
    1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟。
    2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
    3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条
     时正好能看到图片。
    

    2.预加载:

    意义: 牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
    实现方式:
    实现预载的方法非常多,可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
    常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。
    只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。
    当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
    
    展开全文
  •  原文链接:前端懒加载以及预加载 加载(延迟加载):延迟加载图片或符合某些条件时才加载某些图片。 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。 两种技术的本质: 两者的行为...

    写在前面的话:

      原文链接:前端懒加载以及预加载

     
    懒加载(延迟加载):延迟加载图片或符合某些条件时才加载某些图片。

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

    两种技术的本质:
    两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。
     
    懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    1.懒加载:

    意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

    实现方式:

    1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟。
    2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
    3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条
     时正好能看到图片。

    2.预加载:

    意义: 牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。

    实现方式:

    实现预载的方法非常多,可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
    常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。
    只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。
    当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
     
     
     
     
     

    转载于:https://www.cnblogs.com/Christeen/p/6525274.html

    展开全文
  • 前端图片懒加载和预加载

    千次阅读 2019-06-19 10:26:00
    懒加载 场景:对于图片过多的页面,为了加快页面加载速度,需要将页面内未出现的可视区域内的图片先不做加载,等到滚动可视区域后再去加载。 原理:img标签的src属性用来表示图片的URL,当这个属性值不为空时,...

    前端图片懒加载和预加载

    懒加载

    场景:对于图片过多的页面,为了加快页面加载速度,需要将页面内未出现的可视区域内的图片先不做加载,等到滚动可视区域后再去加载。
    原理:img标签的src属性用来表示图片的URL,当这个属性值不为空时,浏览器就会根据这个值发送请求,如果没有src属性就不会发送请求。所以,在页面加入时将img标签的src指向为空或者指向一个小图片(loading或者缺省图),将真实地址存在一个自定义属性data-src中,当页面滚动时,将可视区域的图片的src值赋为真实的值。
    核心代码:

    <img src="https://i.loli.net/2017/08/08/5989307b6c87b.gif" data-xxx="${data.content[i].url}">
    
    let images = document.querySelectorAll('img[data-xxx]')
    for(let i = 0; i <images.length; i++){
      if(/* 出现在屏幕里(images[i]) */){
      // 一般判断这个高度用到高度有:浏览器高度,文档高度,滚动的高度
        images[i].src = images[i].getAttribute('data-xxx')
        images[i].removeAttribute('data-xxx')
      }
    }
    

    预加载

    场景:图鼠标移入一张图片时,换成另一张图片,移出时换回原来的图片,正常做法是,鼠标移入的时候,改变图片的src,但这时就要去加载图片了,会等待一段时间,这样体验不好。预加载的做法是,在页面加载完,鼠标移入之前就通过Image对象把图片加载进缓存了,这样鼠标移入的时候直接从缓存里读取了,速度很快,解决此问题的方案就是实现图片预加载。
    原理:事先把网页的图片记载到本地,之后就直接到缓存中拿图片
    实现方法一般有三种:
    1)、使用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; }
    

    将这三个元素应用到HTML元素中,就可以通过CSS的background属性将图片预加载到屏幕外的背景上,当它们在页面的其他地方被调用时,浏览器就会在渲染中使用预加载的图片地址。
    2)、使用CSS+JS进行图片预加载
    为了解决上述问题,可以增加一些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);
    

    3)、仅使用JS实现预加载

    var images = new Array()  
    function preload() {  
        for (i = 0; i < preload.arguments.length; i++) {  
            images[i] = new Image()  
            images[i].src = preload.arguments[i]  
        }  
    }  
    preload(  
        "http://domain.tld/gallery/image-001.jpg",  
        "http://domain.tld/gallery/image-002.jpg",  
        "http://domain.tld/gallery/image-003.jpg"  
    )  
    

    尤其适用于预加载大量图片的场景,例如画廊,预加载图片数量多达50多张,只要用户输入登录账号大部门画廊图片将被预加载。
    4)、使用Ajax实现预加载
    使用Ajax方法实现预加载,不仅仅是针对图片的预加载,还会预加载CSS、JS等相关的东西

    // Ajax实现
    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);  
    }
    
    // 相等功能JS实现
    window.onload = function() {  
        setTimeout(function() {  
            // reference to <head>  
            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);  
    }
    

    通过这种方法加载的文件只是单纯的被预加载了而已,具体内容并没有应用到加载的页面上,而相应的JS方法创建了三个并没有什么用的DOM元素。相比之下,使用Ajax的预加载方法自然优越于JS。

    展开全文
  • 加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。 1.加载: 意义: 加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。 实现方式: 1.第一种是...

    懒加载(延迟加载):延迟加载图片或符合某些条件时才加载某些图片。

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

    两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。

    1.懒加载:

    意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
    实现方式:
    1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟。
    2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
    3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条
     时正好能看到图片。
    

    2.预加载:

    意义: 牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
    实现方式:
    实现预载的方法非常多,可以用CSS(background)、JS(Image)、HTML(<img />)都可以。
    常用的是new Image();设置其src来实现预载,再使用onload方法回调预载完成事件。
    只要浏览器把图片下载到本地,同样的src就会使用缓存,这是最基本也是最实用的预载方法。
    当Image下载完图片头后,会得到宽和高,因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

    转载于:https://www.cnblogs.com/mmzuo-798/p/7169239.html

    展开全文
  • 懒加载和预加载的实现

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

    2019-09-30 04:53:08
    懒加载和预加载 Motivation 今天做拼多多的前端笔试的时候问到了这样一个问题: 图片懒加载和预加载的不同点?他们的应用场景?两种技术对服务器前端的影响。 好像只是听说过,没有具体了解和应用过。所以在这里赶紧...
  • 1. 懒加载 懒加载的原理很简单,就是当图片滚动到视口中时,将img的src替换成真是的图片地址。通常我们将真实的图片地址存放于data-original这个属性中 const viewHeight = document.documentElement.clientHeight; ...
  • 提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言,说明懒加载和预加载的核心要点以及实现。1.加载加载的要点如下:1.图片进入可视区域之后请求图片资源;2.对于电商等...
  • 图片懒加载和预加载

    2021-04-07 09:57:56
    这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。在某些情况下,它还可以帮助减少服务器负载。常适用图片很多,页面很长的电商网站场景中。 2.为什么要用加载 能提升用户的体验,不妨设想下,用户...
  • JavaScript 图片懒加载和预加载 文章目录JavaScript 图片懒加载和预加载一.背景二.加载1.为什么要使用加载?2.实现加载思路3.加载原理4.实现加载三.预加载1.为什么要使用预加载2.实现预加载思路3.实现...
  • 点击上方蓝字关注「悲伤日记」 愿我如星君如月 夜夜流光相皎洁 1.什么是懒加载?图片懒加载是一种网页优化技术。图片作为一种网络资源,在被请求时也与普通静态资源...
  • 一、懒加载 【1.1】什么是懒加载懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 40,110
精华内容 16,044
关键字:

前端懒加载和预加载