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

原创 2017年07月26日 23:35:47

感觉自己好久没有写博客了,可能自己变懒了。不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西。新的技术需要关注,但是我要去研究一下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('图片的路径');
    })
    /*
    当然我们也可以写成一个函数,这里我就不演示了
    */
版权声明:本文为博主原创文章,未经博主允许不得转载。

前端优化之图片预加载和延迟加载

预加载  : 预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可享受到极快的加载速度。 比如预加载这三张图片: 函数声明:function preloadimg(arra...
  • Dohaelis
  • Dohaelis
  • 2016年09月12日 09:38
  • 759

Javascript图片预加载详解

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布...
  • yisuowushinian
  • yisuowushinian
  • 2015年05月29日 11:01
  • 31585

Javascript实现图片的预加载的完整实现

图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天我们将来实现一个完整...
  • sdta25196
  • sdta25196
  • 2017年11月30日 10:40
  • 230

[前端] 图片预加载及获取属性

有点累,不想说什么了,,直接上代码。。。。 1、图片预加载 function preloadImg(srcArr) { if(srcArr instanceof Array) { ...
  • u010081689
  • u010081689
  • 2015年10月28日 17:18
  • 796

img.onload 实现图片预加载方法

例子: 1111 function loadImage(url,callback) { var im...
  • kongjiea
  • kongjiea
  • 2014年04月22日 14:41
  • 48262

图片预加载与懒加载

一、预加载 前面做了个招聘页面,里面有大量的图片需要加载。 一开始都是全部写在页面中,在测试环境还看不出很慢,一放到正式环境就不对了。 微信浏览器本来就觉得慢,现在一下子要加载这么多图片,一下子...
  • three_bird
  • three_bird
  • 2016年05月10日 10:19
  • 7995

img.onload 实现图片预加载方法

参考:http://blog.csdn.net/kongjiea/article/details/24308053
  • ForMyQianDuan
  • ForMyQianDuan
  • 2016年08月13日 18:28
  • 1069

网页图片的懒加载和预加载

网页涉及到大量图片时,由于图片大量加载,导致页面会出现一段时间的“空白”,应对这种情况需要用到图片的懒加载和预加载技术, 预加载主要原理::提前加载图片,当用户需要查看时可直接从本地缓存中渲染。在含有...
  • yuegedetiang
  • yuegedetiang
  • 2016年07月20日 16:34
  • 2406

图片预加载与图片懒加载(缓载)的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一、什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前...
  • alex8046
  • alex8046
  • 2015年12月23日 16:43
  • 6898

图片预加载的方法

一、为什么要使用图片预加载          未进行预加载处理的时候,在浏览器渲染图片的时候, 它获得图片的一片区域的时候, 就由上至下逐渐地填充满图片区域原来的留白部分(其中这种原本的留白就是预加载...
  • sinat_30443713
  • sinat_30443713
  • 2017年07月29日 14:34
  • 398
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现图片预加载的几种方式
举报原因:
原因补充:

(最多只允许输入30个字)