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

原创 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('图片的路径');
    })
    /*
    当然我们也可以写成一个函数,这里我就不演示了
    */
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Javascript图片预加载详解

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

图片预加载的方法

一、为什么要使用图片预加载          未进行预加载处理的时候,在浏览器渲染图片的时候, 它获得图片的一片区域的时候, 就由上至下逐渐地填充满图片区域原来的留白部分(其中这种原本的留白就是预加载...

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

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

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

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

JQ图片预加载(无序加载and有序加载)

效果预览:代码如下: 图片加载之无序加载 *{ margin: 0; ...

图片预加载与懒加载

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

jquery预加载的几种方式

Jquery加载的几种方式 //①页面加载完之前执行,与嵌入的js加载方式一样 (function ($) {     alert('start'); })(jQuery); //②页面加载后执行...

JQuery实现Ajax加载图片

最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览。 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓...

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

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

Wdatepicker日期控件的使用指南

示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用示例2-3-3 使用内置参数示例 2-4-1: 年月日时分秒示例 2-4-2 时分秒示例 2-4-3 年...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现图片预加载的几种方式
举报原因:
原因补充:

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