首页登陆欢迎您!
首页登陆 > 运维知识 > 多种js图片预加载实现方式分享,js图片加载分享

多种js图片预加载实现方式分享,js图片加载分享

时间:2019-12-06

本文实例讲述了jquery预加载图片的方法。分享给大家供大家参考。具体如下:

多种js图片预加载实现方式分享,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请求。

以上就是本文的全部内容,希望对大家理解js图片预加载有所帮助。

方法一:用CSS和JavaScript实现预加载 
实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 
单纯使用CSS,可容易、高效地预加载图片,代码如下:

function preloadImages { if  == 'object' && typeof  === "function") { var iCallbackAfter = oImageList.length; var iPreloadInterval = window.setInterval { if  { window.clearInterval; callback; $.each(oImageList, function { oImageList[iIndex] = new Image(); oImageList[iIndex].onload = function { iCallbackAfter--; }; oImageList[iIndex].onabort = function { console.log; }; oImageList[iIndex].onerror = function { console.log; }; if (!sImage.match { sImage = sImage; } oImageList[iIndex].src = sImage; }); }}

您可能感兴趣的文章:

  • javascript 也来玩玩图片预加载
  • 纯JS图片批量预加载技术代码
  • 再谈javascript图片预加载技术(详细演示)
  • js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
  • JS实现图片预加载无需等待
  • js 利用image对象实现图片的预加载提高访问速度
  • javascript预加载图片、css、js的方法示例介绍
  • 利用CSS、JavaScript及Ajax实现高效的图片预加载

图片预加载有大体有几种方式 1.html标签或css加载图片 显而易见我们使用img标签或者通过标...

图片 1

希望本文所述对大家的jQuery程序设计有所帮助。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }    
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }    
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }  

将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。 
该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下:

 

图片 2

图片 3

// better image preloading @ <A href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</A> function preloader() {    
    if (document.getElementById) {    
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";    
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";    
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";    
    }    
}    
function addLoadEvent(func) {    
    var oldonload = window.onload;    
    if (typeof window.onload != 'function') {    
        window.onload = func;    
    } else {    
        window.onload = function() {    
            if (oldonload) {    
                oldonload();    
            }    
            func();    
        }    
    }    
}    
addLoadEvent(preloader);  

图片 4

在该脚本的第一部分,我们获取使用类选择器的元素,并为其设置了background属性,以预加载不同的图片。 
该脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕。 
如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可。
方法二:仅使用JavaScript实现预加载 
上述方法有时确实很高效,但我们逐渐发现它在实际实现过程中会耗费太多时间。相反,我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法,它们可以很漂亮地工作于所有现代浏览器之上。 
JavaScript代码段1 
只需简单编辑、加载所需要图片的路径与名称即可,很容易实现:

图片 5

图片 6

上一篇:nodejs实现遍历文件夹并统计文件大小_node.js_脚本之家 下一篇:没有了