zoukankan      html  css  js  c++  java
  • js图片预加载

    图片预加载有大体有几种方式

    1.html标签或css加载图片。

      显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载(使用window.onload等)。

    2.纯js实现预加载

    空城计-Code记Javascript实现图片的预加载的完整实现的预加载实例为

    function preloadimages(arr){   
        var newimages=[], loadedimages=0
        var postaction=function(){}  //此处增加了一个postaction函数
        var arr=(typeof arr!="object")? [arr] : arr
        function imageloadpost(){
            loadedimages++
            if (loadedimages==arr.length){
                postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
            }
        }
        for (var i=0; i<arr.length; i++){
            newimages[i]=new Image()
            newimages[i].src=arr[i]
            newimages[i].onload=function(){
                imageloadpost()
            }
            newimages[i].onerror=function(){
                imageloadpost()
            }
        }
        return { //此处返回一个空白对象的done方法
            done:function(f){
                postaction=f || postaction
            }
        }
    }

      原理就是循环创建Image对象,并设置对象的src为指定图片,然后监听图片加载完成onload = function(){imageloadpost()},当图片加载完成后就会执行到imageloadpost。原来IE6还有一个问题:如果预加载的图片已经在内存中则不会再次出发img.onload事件。但是IE7+都没有问题了。其他浏览器也没有问题,所以上面这种img.onload监听事件已经没有兼容问题了。

    3.Ajax实现预加载

      ajax请求是任何数据都可以请求的,图片也不例外。先看一下js/css预加载

        // XHR to request a JS and a CSS  
            var xhr = new XMLHttpRequest();  
            xhr.open('GET', 'http://domain.tld/preload.js');  
            xhr.send('');  
            xhr = new XMLHttpRequest();  
            xhr.open('GET', 'http://domain.tld/preload.css');  
            xhr.send(''); 

       而图片的ajax预加载实际和纯js预加载图片一样

    new Image().src = "http://domain.tld/preload.png"; 

       只不过这里的解释成了ajax加载。可以理解new Image都是ajax get请求。

  • 相关阅读:
    A1052. Linked List Sorting (25)
    A1032. Sharing (25)
    A1022. Digital Library (30)
    A1071. Speech Patterns (25)
    A1054. The Dominant Color (20)
    A1060. Are They Equal (25)
    A1063. Set Similarity (25)
    电子码表
    矩阵键盘
    对象追踪、临时对象追踪、绝对坐标与相对坐标
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/5198816.html
Copyright © 2011-2022 走看看