zoukankan      html  css  js  c++  java
  • 常用图片预加载方式

    为什么使用图片预加载
    为什么会考虑使用图片预加载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……预加载将在这方面帮助你。

    它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟。

    下面整理常用的图片预加载:

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

    body:after {
        content: "";
        display: block;
        position: absolute;
        background: 
        url("../image/manage/help/01.png") no-repeat -10000px -1000px,
        url("../image/manage/help/02.png") no-repeat -10000px -1000px,
        url("../image/manage/help/03.png") no-repeat -10000px -1000px,
        url("../image/manage/help/04.png") no-repeat -10000px -1000px,
        url("../image/manage/help/05.png") no-repeat -10000px -1000px,
         0;
        height: 0
    }
    

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

    (function(){
        var imgSrcArr = [
            'image/1.png',
            'image/2.png',
            'image/3.png',
            'image/4.png',
            'image/5.png',
            'image/6.png',
            'image/7.png'
        ];
        var imgWrap = [];
        function preloadImg(arr) {
            for(var i =0; i< arr.length ;i++) {
                imgWrap[i] = new Image();
                imgWrap[i].src = arr[i];
            }
        }
        setTimeout(function(){preloadImg(imgSrcArr)},5000)
    }());
    

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

    .preload-img:after{
        content: "";
        display: block;
        position: absolute;
        background: 
        url("../image/manage/help/01.png") no-repeat -10000px -1000px,
        url("../image/manage/help/02.png") no-repeat -10000px -1000px,
        url("../image/manage/help/03.png") no-repeat -10000px -1000px,
        url("../image/manage/help/04.png") no-repeat -10000px -1000px,
        url("../image/manage/help/05.png") no-repeat -10000px -1000px,
         0;
        height: 0
    }
    
    /*
        比如我们写了上面的这样一个类,但是页面中没有用到,我们在文档加载完毕之后,给某个元素添加该类
    */
     $("#target").addClass("preload-img")
    

      

  • 相关阅读:
    软件测试作业随笔之二:Homework 2
    软件项目管理作业随笔之一:记我完成的一个项目
    C#博客随笔之十:Problem Statement+System Glossary+System Supplementary Specification FOR每美欲下
    C#博客随笔之九:EF框架的使用
    C#博客随笔之八:EntityFramework初识
    C#博客随笔之七:反射初体验
    C#博客随笔之六:数据绑定
    node.js 框架基本功能
    为什么不用第三方缓存
    微服务基础设施实现方案 -- node.js
  • 原文地址:https://www.cnblogs.com/chenyablog/p/11911331.html
Copyright © 2011-2022 走看看