mui预加载

预加载

页面正常打开步骤:先创建 -> 在显示

plus.webview.create( url, id, styles, extras ); // 创建页面
plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras ); // 显示已经创建的或者隐藏的窗口
plus.webview.open( url, id, styles, aniShow, duration, showedCB ); // 创建并打开

问题:在创建打开页面时,比较费时,会出现等待框,影响用户体验,所以用到预加载技术

预加载是在页面还没用到的时候提前创建,当用到的时候直接显示,节约时间,mui提供了两种预加载的方式

mui.init异步加载多个页面

mui.init({
  preloadPages:[
    {
      url:prelaod-page-url,
      id:preload-page-id,
      styles:{},//窗口参数
      extras:{},//自定义扩展参数
      subpages:[{},{}]//预加载页面的子页面
    }
  ],
  preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});

问题:因为是异步执行,所以可能会出现无法立即得到webview对象,如下

mui.init({
  preloadPages:[
    {
      url:‘list.html‘,
      id:‘list‘
    }
  ]
});
var list = plus.webview.getWebviewByid(‘list‘);//这里可能返回空;

mui.preload 同步立即返回webview对象,加载1个页面

var page = mui.preload({
    url:new-page-url,
    id:new-page-id,//默认使用当前页面的url作为id
    styles:{},//窗口参数
    extras:{}//自定义扩展参数
});

判断预加载是否成功

方式1在父页面通过如下代码获取当前所有的webview对象,通过if判断是否预加载进来

mui.plusReady(function(){
    setTimeout(function(){
        var array = plus.webview.all();
        if(array){
            for(var i=0,len=array.length;i<len;i++){
                    console.log(array[i].getURL());
                }
        }
    },5000)
});

方式2,通过观察预加载页面打开时没有等待框,mui.openWindow默认先显示等待框

原文地址:https://www.cnblogs.com/bonly-ge/p/9645940.html

时间: 2024-09-30 16:51:00

mui预加载的相关文章

MUI框架预加载

MUI - 预加载 预加载都是在mui.init({)}中执行的 方式一:preload一次仅能预加载一个页面(除非循环) var subWebview = mui.preload({ url: 'examples/accordion.html', id: 'template_sub', top: ' styles: { 48 px ', bottom: '0px' } }); 不设置循环,第一遍可以,第二遍开始就还是卡顿,效果很不好,特别是添加了图片,或者图片滚动 方式二:create一次仅能

没错预加载就是这么简单

之前项目中遇到图片加载问题,首先想到异步加载 ,接着想用什么框架,框架很多,我用的是volley,感觉挺方便的,废话不多说,记录一下自己的错误然后接着前行,用volley的时候虽然出现了效果,但是在出现默认图片之前还是出现几秒让人难以忍受的空白,不得不靠. 上代码: /** 在刷屏页 创建任务: private void getData(){ ReadImgTask task = new ReadImgTask(); task.execute(); } 接着: /** * 预加载跑马灯图片 *

【JQuery插件】图片预加载

屏幕滚动到图片当前位置加载图片,给需要预加载的图片设置一个data-url的属性即可. ;(function($){ /* 图片预加载 @author liuming @demo $('img[data-url]').ImgLoading(); */ $.fn.ImgLoading=function(){ var aImgs =$(this),/*缓存图片列表*/ $win = $(window), img,imgTop, winH = $win.height(), Timmer=null, i

闭包,jQuery插件的写法:图片预加载

最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进行冲突 ( function (通过它来接收对象) { } )( 通过它来传递对象 ); //可以使用jQuery的$符号的闭包插件的写法: //写插件的常用方法 $.extentd() (function ($){ //构造函数 function PreLoad(imgs,options){ th

Promise实现多图预加载

Promise正如它的中文意思"承诺"一样,保存着未来会发生事件(一般为异步操作).Promise避免了"回调地狱",写法更加接近同步操作.说到同步,我更加喜欢async.await,它们书写更贴近同步操作. 图片加载往往是异步的,如果有操作需要等到所有的图片加载完之后再执行,这时候就需要不断的监听所有图片的加载情况. ES5 利用ES5实现多图预加载,可以通过计数器判断有多少图片加载完成. var count = 0, // 计数器 imgs = []; /* *

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

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一.什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间.否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载.当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验. 图

去除预加载的Viewpager

package com.example.zhbj_heima47.view; /* * Copyright (C) 2011 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtai

Javascript图片的懒加载与预加载

1. 缓载.预载的概念 这些技术不仅限于图片加载,但我们首先讨论最常用的图片加载. 缓载:延迟加载图片或符合某些条件时才加载某些图片. 预载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.缓载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力. 2. 缓载的意义与实现 缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 主要体现在三种模式上: 第一种是纯粹的延迟加载,使用setTimeOut

ViewPage+frament不预加载下一个Frament数据解决办法

在做一个ViewPage+Frament 滑动数效果,当滑动到每一页时加载哪一页的数据,但是ViewPage会预加载下一也数据,这个问题之前做项目是一直未解决,今天找到一个方法一下子就解决的这个问题,Frament里面有一个setUserVisibleHint方法,setUserVisibleHint每次fragment显示与隐藏都会调用,下面说一下这个方法的使用 @Override public void setUserVisibleHint(boolean isVisibleToUser)