摘要：之前一直以为图片预加载，图片懒加载是差不多的。下面说一下区别和突然想到的一个问题。利用图片预加载将下一张图片提现缓存下来。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。
之前一直以为图片预加载，图片懒加载是差不多的。其实差很多，出发点就不一样。。。。。下面说一下区别和突然想到的一个问题。
图片预加载：事先把图片就下载下来，当下次页面中需要用到这个图片的时候，就直接去读取缓存的图片
具体应用场景：一个轮播图，每次点击屏幕出现下一张图片，如果网速不大好的情况下，可能会加载的比较慢。所以会出现屏幕卡顿，白屏等情况。利用图片预加载将下一张图片提现缓存下来。这样点击下一张的时候就会读取缓存的图片，而不是发起一个新的http请求了。
原理
使用javascript中的 new Image() 创建image对象
给这个image对象的src属性赋值，赋值的同时浏览器就会请求该图片资源。
当点击出先下一张时，如果下一张的src和刚刚的image对象的src值相同，就会去读取缓存。所以更加流畅了。
图片懒加载：当用户需要看到这一部分内容的时候才加载图片
具体应用场景举例：例如淘宝天猫等商品图片特别多，第一次打开页面的时候不可能把所有商品图片都加载出来，那样页面首屏会特别慢。于是首先只加载用户能看见的那一部分图片。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。这样省流量，并且首屏加载比较快。
原理：
所有的img都自定义一个data-src属性，名字可以随便取。这个属性放着该图片的地址，而且不给img添加src属性。因为添加了src属性即使为空，还是会有请求的。
当滑动到用户可以看见的部分之后，将img的data-src属性值赋值给img的src属性，这时候img才会去加载图片资源。
疑问：
上面的图片预加载中的new 出来的image直接赋值src属性就能够加载资源了，可是在jsonp中为什么还要把script标签append到页面中才会发起请求呢？在js中创建的script直接赋值src属性能不能立即发起请求？测试咯！
通过上面的测试，我们发现了使用document.createElement("script")创建出来的script标签给其src赋值之后并没有立即加载资源。而是等到添加到页面中才加载资源。 WHY？
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95922.html
摘要：之前一直以为图片预加载，图片懒加载是差不多的。下面说一下区别和突然想到的一个问题。利用图片预加载将下一张图片提现缓存下来。如果用户滑动到下面，则下面的图片才会加载出来，否则不会加载该图片。 之前一直以为图片预加载，图片懒加载是差不多的。其实差很多，出发点就不一样。。。。。下面说一下区别和突然想到的一个问题。图片预加载：事先把图片就下载下来，当下次页面中需要用到这个图片的时候，就直接去读...
摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。 最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...
摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。 一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...
阅读 2965·2021-11-19 09:40
阅读 2877·2021-09-09 09:32
阅读 660·2021-09-02 09:55
阅读 1260·2019-08-26 13:23
阅读 2265·2019-08-26 11:46
阅读 1143·2019-08-26 10:19
阅读 1930·2019-08-23 16:53
阅读 946·2019-08-23 12:44
