JS进阶篇--实现图片的预加载详解

pkwenda 发布于2019-08-19 14:46 / 1644人阅读

摘要：在项目中常常需要用到的图片预加载效果。幸运的是，这个功能实现起来并不难，我们可以使用和事件去处理决定图片是否加载完成或者失败。现在，我们将为函数增加一个回调函数来处理后续的操作。如此之后，我们调用函数的代码可能会如下面这样。

在web项目中常常需要用到的图片预加载效果。

下面的函数实现了一个我们想要的最基本的图片预加载效果

function preloadimages(arr){
    var newimages=[]
    var arr=(typeof arr!="object")? [arr] : arr  //确保参数总是数组
    for (var i=0; i
我们可以通过如下的方式加载我们想要的图片：
preloadimages(["1.gif", "2.gif", "3.gif"])

上面的方法已经可以满足我们最基本的预加载图片的效果了，但情况往往并不如此，我们往往需要确切的知道图像是否被真正加载完成，并可能在后续执行一系列对图片的操作功能。幸运的是，这个功能实现起来并不难，我们可以使用onload和onerror事件去处理决定图片是否加载完成（或者失败）。在本文的最终实现代码中，我们将会把proloadimages()函数改造成如下的样子。
preloadimages(["1.gif", "2.gif", "3.gif"]).done(function(images){
 //当图片全部加载完成之后，执行此处的代码
 //images参数是Array类型，对应加载进来的图像
 //images[0] 对应的是第一张图像
})

首先我们用image对象的onload和onerror事件处理函数来检测图片的加载情况（成功或失败），改造后的代码如下。
function preloadimages(arr){
    var newimages=[], loadedimages=0
    var arr=(typeof arr!="object")? [arr] : arr
    function imageloadpost(){
        loadedimages++
        if (loadedimages==arr.length){
            alert("图片已经加载完成")
        }
    }
    for (var i=0; i
我们可以使用代码2的调用方法测试该函数，当图片全部加载完成（成功或失败）后，浏览器将会弹出“图片已经加载完成”的消息。
现在，我们将为preloadimages()函数增加一个回调函数来处理后续的操作。
通常我们会为我们的preloadimages()函数增加一个匿名函数做为参数，来完成我们需要的功能。如此之后，我们调用preloadimages()函数的代码可能会如下面这样。
preloadimages(imagesarray, function(){
 //图片加载完成之后执行的操作
})

但是我们现在来做一点点改变，让代码看起来更直观，更易于理解，改造完成之后，preloadimages()函数的调用看起来如下所示。
preloadimages(imagesarray).done(function(){
 //图片加载完成后的操作
})

上面这种写法大家一看一定都会觉得非常清晰明了，那么接下来，我们继续来改造我们的preloadimages()函数。
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
上面的代码，我们稍作修改了几个地方： 
首先，我们增加了一个postaction函数，该函数被用来做为图片加载完成后的回调函数，用户可以在后面调用的时候用自己的处理函数覆盖掉该函数。
第二，我们的preloadimages()函数返回了一个空对象，其中包含一个简单的done()方法，这是实现本次改造的关键所在，确保了链式调用的实现。
最后，我们的调用变为如下形式：
 preloadimages(["1.gif", "2.gif", "3.gif"]).done(function(images){
   alert(images.length) //alerts 3
  alert(images[0].src+" "+images[0].width) //alerts "1.gif 220"
})

当然，我们还可以在done()里实现各种我们需要的图片操作！

云服务器 GPU云服务器 js实现图片预加载 js实现数据的懒加载图片进阶篇 webrtc进阶信令篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78106.html

JS进阶篇--RequireJS模块化编程详解

摘要：所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。 1.模块的写法模块化编程一般都有这么几个过渡过程，如下描述。原始方法 function m1(){ 　　//... } function m2(){ 　　//... } 上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显：污染了全局变量，无法保证不与...

妤锋シ 2019-08-20 16:37 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0