实现图片预加载的几种方式

感觉自己好久没有写博客了，可能自己变懒了。不知道为什么最近有点迷茫，不知道是该去学一下新东西还是该去看一下具有深度的东西。新的技术需要关注，但是我要去研究一下jquery的源码，这个东西很早就想去看，无奈时间安排不过来。学了新的东西，没有机会去实践，很快就忘记了，但是我们还是要保持一种不断吸收新知识的姿态。讲了这么多废话，好了，开始今天的话题。实现图片预加载的几种方式。

在开发的过程，我们经常会遇到这样的要求，当鼠标hover上去的时候，更改菜单的背景。如果没有进行图片预加载的话，会出现闪烁。那么拥有1px的眼睛的设计师们不会放过你的。为什么会出现这张情况？因为hover的时候，图片才会去加载。那么我们现在来解决这个问题。

首先我们要知道一点：如果图片在使用之前就已经请求过了，那么再次使用的时候，就不会再去请求（ps：图片路径一样）。下面讲实现方式

1.使用纯的css进行图片预加载

body:after {content: "";display: block;position: absolute;background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;width: 0;height: 0
}

原理是加载了该图片，但是我们不显示在可视范围内。这种方式极其简单。但是也有一个致命的弱点，图片跟随文档一同加载，有时候我们为了提高文档的加载速度，那么这种方式方式就不适合了。

2.使用纯javascript进行图片预加载

  //存放图片路径的数组var imgSrcArr = ['imgsrc1','imgsrc2','imgsrc3','imgsrc4'];var imgWrap = [];function preloadImg(arr) {for(var i =0; i< arr.length ;i++) {imgWrap[i] = new Image();imgWrap[i].src = arr[i];}}preloadImg(imgSrcArr);//或者延迟的文档加载完毕在加载图片$(function () {preloadImg(imgSrcArr);})

3.使用css+js方式进行图片预加载

.preload-img:after{content:"",background: url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_02.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_03.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_04.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_05.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_06.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_07.png?v=201707241359") no-repeat -10000px -1000px,url("../image/manage/help/help_item2_01.png?v=201707241359") no-repeat -10000px -1000px;}/*比如我们写了上面的这样一个类，但是页面中没有用到，我们在文档加载完毕之后，给某个元素添加该类
*/$(function(){$("#target").addClass("preload-img")
})

4.使用ajax方式进行图片预加载

    $(function(){$.get('图片的路径');})/*当然我们也可以写成一个函数，这里我就不演示了*/

实现图片预加载的几种方式相关推荐

图片预加载的几种方式
在开发的过程,我们经常会遇到这样的要求,当鼠标hover上去的时候,更改菜单的背景.如果没有进行图片预加载的话,会出现闪烁.那么拥有1px的眼睛的设计师们不会放过你的.为什么会出现这张情况?因为hov ...
图片预加载的三种方法
转载: 图片预加载的三个方法 - 浅夏初晴 - 博客园利用CSS.JavaScript及Ajax实现图片预加载的三大方法预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利 ...
实现图片懒加载的5种方式
目录 1.懒加载介绍 2.实现懒加载技术的方案 3.具体实现代码 1.懒加载介绍当页面需要展示大量图片时,如果一次性渲染所有图片,会向服务器发出大量请求,导致服务器响应慢,出现页面卡顿或崩溃等问题. ...
js图片懒加载的第二种方式
这种方式是图片按照顺序一张一张的加载直到所有图片都加载完成 html 同样的要让图片进行懒加载,路径引用就得用 data-src <ul><li><img data-sr ...
html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
代理模式虚拟代理实现图片预加载
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 在Web开发中,图片预加载是一种常用的技术,如果直接给某个img标签节点设置src属性,由于图片过大或者网络不佳,图片的位置往往有段时 ...
一种网页游戏图片预加载方案
一种网页游戏图片预加载方案上个月我写了一篇关于网页游戏图片预加载技术的文章,叫<很山寨的网页游戏图片预加载技术>.这个方案用到项目上后,发现了一些问题,经过大家的努力,这些问题基本得到解 ...
3种Javascript图片预加载的方法详解
3种Javascript图片预加载的方法详解预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度. 这对图片画廊及图片占据很大比例 ...
javascript图片浏览器的核心——图片预加载
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更 ...

实现图片预加载的几种方式

实现图片预加载的几种方式相关推荐

最新文章

热门文章