精华内容
下载资源
问答
  • 骨架屏

    2018-12-20 09:59:51
    骨架屏 ##骨架屏提升用户体验,比菊花屏、白屏用户体验强很多,下面就实践怎样搭骨架屏 使用vue-cli搭建项目,安装依赖,使用vue-skeleton-webpack-plugin注入骨架屏。在build目录下创建webpack.skeleton.conf.js '...

    骨架屏
    ##骨架屏提升用户体验,比菊花屏、白屏用户体验强很多,下面就实践怎样搭骨架屏

    使用vue-cli搭建项目,安装依赖,使用vue-skeleton-webpack-plugin注入骨架屏。在build目录下创建webpack.skeleton.conf.js

    'use strict';
    const path = require('path')
    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')
    const nodeExternals = require('webpack-node-externals')
    const config = require('../config')
    const utils = require('./utils')
    const isProduction = process.env.NODE_ENV === 'production'
    const sourceMapEnabled = isProduction ?
    	config.build.productionSourceMap :
    	config.dev.cssSourceMap
    
    function resolve(dir) {
    	return path.join(__dirname, dir)
    }
    
    let skeletonWebpackConfig = merge(baseWebpackConfig, {
    	target: 'node',
    	devtool: false,
    	entry: {
    		app: resolve('../src/entry-skeleton.js')
    	},
    	output: Object.assign({}, baseWebpackConfig.output, {
    		libraryTarget: 'commonjs2'
    	}),
    	externals: nodeExternals({
    		whitelist: /\.css$/
    	}),
    	plugins: []
    })
    
    // important: enable extract-text-webpack-plugin 
    // 重点配置
    skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
    	sourceMap: sourceMapEnabled,
    	extract: true
    })
    
    module.exports = skeletonWebpackConfig
    

    ##在webpack.prod.conf.js和webpack.dev.conf.js中引入插件后,在src文件下次创建入口文件entry-skeleton.js

    import Vue from 'vue'
    import Skeleton from './skeleton'
    export default new Vue({
    	components: {
    		Skeleton
    	},
    	template: `
        <div>
          <skeleton id="skeleton" style="display:none"/>
        </div>`
    })
    

    ##和skeleton.vue文件

    <template>
    	<div>
    		<div class="skeleton">
    			<div class="skeleton-head"></div>
    			<div class="skeleton-body">
    				<div class="skeleton-name"></div>
    				<div class="skeleton-title"></div>
    				<div class="skeleton-content"></div>
    			</div>
    		</div>
    		<div class="skeleton">
    			<div class="skeleton-head"></div>
    			<div class="skeleton-body">
    				<div class="skeleton-name"></div>
    				<div class="skeleton-title"></div>
    				<div class="skeleton-content"></div>
    			</div>
    		</div>
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'skeleton'
    	};
    </script>
    
    <style scoped>
    	.skeleton {
    		padding: 15px;
    	}
    	
    	.skeleton .skeleton-head,
    	.skeleton .skeleton-name,
    	.skeleton .skeleton-title,
    	.skeleton .skeleton-content,
    	.skeleton .skeleton-content {
    		background: rgb(194, 207, 214);
    	}
    	
    	.skeleton-head {
    		width: 33px;
    		height: 33px;
    		border-radius: 50%;
    		float: left;
    	}
    	
    	.skeleton-body {
    		margin-left: 50px;
    	}
    	
    	.skeleton-name {
    		width: 150px;
    		height: 30px;
    		margin-bottom: 10px;
    	}
    	
    	.skeleton-title {
    		width: 100%;
    		height: 30px;
    	}
    	
    	.skeleton-content {
    		width: 100%;
    		height: 30px;
    		margin-top: 10px;
    	}
    </style>
    
    

    ##运行 npm run dev 就可以运行骨架屏了,npm run build打包完成了。

    展开全文
  • 小程序骨架屏

    2019-03-08 14:42:00
    小程序骨架屏实现方式
  • iOS骨架屏源码

    2019-01-04 15:56:05
    骨架屏实现,涵盖Android、iOS、前端的骨架屏实现,文章地址:https://blog.csdn.net/xiangzhihong8/article/details/85780629
  • 骨架屏效果

    2019-09-26 10:45:18
    骨架屏效果 参考文献: [1] Vue页面骨架屏 [2] Vue 页面骨架屏注入实践 [3] 通过vue-cli3构建一个SSR应用程序

    骨架屏效果

    在我们访问页面时,当资源未加载完成时,通常会出现空白,这种体验不是很好,常用的解决方法有添加loading页、使用骨架屏,相比于loading页,骨架屏更贴近实际内容。如下图所示:

    在这里插入图片描述
    刷新页面时资源未加载成功时,先展示骨架屏。

    骨架屏原理

    在使用vue框架生成的项目中,当我们访问页面时,最先加载的是一个名为index.html文件,此时它里面就只有一个id为app的div元素,只有当js资源加载完成后,vue框架才会生成页面展示需要的DOM节点并注入到页面中进行显示,js资源加载时间的长短就决定了空白时长,如果在这段时间index.html内含有内容,那么用户看到的就不再是空白,而骨架屏效果就是利用这一原理,将页面的内容占位情况在用户访问之前就写入到index.html中,这样在js资源未加载成功时,用户看到的就是页面内容占位情况。这其中需要用到服务端渲染知识,在服务端将含有骨架屏内容的页面生成好,浏览器只负责展示。vue项目服务端渲染我们使用官方比较推荐的vue-server-renderer

    在vue项目中如何引入骨架屏

    以使用vue-cli3默认方式创建的vue项目为例,介绍骨架屏的引入:

    骨架屏的实现方式有多种,可以简单使用一张图片代替,也可以写一个vue组件,也可以引用一些工具在打包时自动生成,本文是手动写了一个骨架屏vue组件。

    首先根据页面内容编写对应的骨架屏组件,如下:

    // HelloWorldSkeleton.vue
    <template>
      <div class="skeleton-wrapper">
        <div class="img-placeholder"></div>
        <h1 class="h1-placeholder"></h1>
        <p class="p-placeholder"></p>
        <h3 class="h3-placeholder"></h3>
        <ul class="ul-container">
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
        </ul>
        <h3 class="h3-placeholder"></h3>
        <ul class="ul-container">
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
        </ul>
        <h3 class="h3-placeholder"></h3>
        <ul class="ul-container">
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
          <li class="li-placeholder"></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'hello-world-skeleton'
    }
    </script>
    
    <style lang="scss" scoped>
    .skeleton-wrapper{
      margin-top: 60px;
      text-align: center;
      .img-placeholder{
        display: inline-block;
        width: 200px;
        height: 200px;
        background: #e5e5e5;
      }
      .h1-placeholder, .p-placeholder{
        width: 400px;
        height: 37px;
        margin: 0 auto;
        background: #e5e5e5;
      }
      .p-placeholder{
        margin: 16px auto;
      }
      .h3-placeholder{
        width: 200px;
        height: 22px;
        margin: 0 auto;
        background: #e5e5e5;
      }
      .ul-container{
        list-style-type: none;
        padding: 0;
      }
      .li-placeholder{
        display: inline-block;
        width: 80px;
        height: 18px;
        margin: 0 10px;
        background: #e5e5e5;
      }
    }
    </style>
    

    骨架屏编写完成后,接下来就是如何引用的问题了。vue-cli3创建的项目主要是用于客户端渲染,而骨架屏需要用到服务端渲染,即同一项目出现两种渲染方式,这就需要我们对项目的打包配置进行修改,vue-cli3对webpack的集成度比较高,有好处也有坏处,好处就是省事,帮我们免去一些基本配置,坏处就是当我们需要更改webpack配置时会不太容易且有一定限制,vue-cli3允许我们在项目根目录下创建vue.config.js配置文件,在该文件中通过配置configureWebpack来修改webpack相关配置。

    vue-cli3创建的项目中自带的webpack配置是用于客户端渲染,我们可以不对客户端渲染的打包配置进行配置,只需要添加服务端渲染的相关配置即可,具体如下:

    // vue.config.js
    const path = require('path')
    const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
    const nodeExternals = require('webpack-node-externals')
    const ISSERVER = process.env.WEBPACK_TARGET === 'node'
    module.exports = {
      configureWebpack: () => {
        if (ISSERVER) {
          return {
            target: 'node',
            entry: path.join(__dirname, './src/components/skeleton-entry.js'),
            devtool: 'source-map',
            output: {
              libraryTarget: 'commonjs2'
            },
            externals:nodeExternals({
              whitelist: /\.css$/
            }),
            plugins: [
              new VueSSRServerPlugin()
            ]
          }
        }
      } 
    }
    

    vue.config.js文件中通过接收变量WEBPACK_TARGET来区分是客户端渲染还是服务端渲染,如果是服务端渲染,我们需要重新配置webpack的入口文件等属性。变量WEBPACK_TARGET是如何传入的呢?当然是通过执行package.jsonscripts命令来传入的,因此需要对scripts命令进行修改:

    {
    	...
    	"scripts": {
        	"serve:client": "vue-cli-service serve",
        	"serve:server": "npm run build:server && node skeleton.js",
        	"build:client": "vue-cli-service build",
        	"build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build --mode server",
        	"build": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
        	"build:mac": "npm run build:server && mv dist/vue-ssr-server-bundle.json bundle && npm run build:client && mv bundle dist/vue-ssr-server-bundle.json",
        	"lint": "vue-cli-service lint",
        	"dev": "npm run serve:server && npm run serve:client"
      	},
      	...
    }
    

    命令解读:其中,serve:client命令用于在本地启动服务(用于浏览客户端渲染的相关页面);serve:server命令中串联执行了npm run build:servernode skeleton.js命令,npm run build:server用于服务端渲内容的打包,利用vue-server-renderer/server-plugin插件最终输出一个json文件,node skeleton.js用于读取生成的json文件,并通过vue-server-renderercreateBundleRenderer方法将内容写入到index.html文件中;build:client命令用于打包客户端渲染相关的内容;build:server命令用于打包服务端渲染的相关内容,通过传入WEBPACK_TARGET=node参数,告诉webpack使用服务端渲染相关配置进行打包,如果不带--mode server参数,那么打包时会报错,如下:
    在这里插入图片描述
    附上地址

    build命令就是将build:server命令与build:client命令结合,由于在执行vue-cli-service build命令时会删除dist文件夹,当build:server生成的json文件在dist中时继续执行build:client命令会将json文件删除,因此使用了move命令先将生成的json文件移出dist文件夹,当build:client命令执行完后,再移入dist中;build:mac命令为在mac下的构建命令,作用与build命令相同;dev命令就是将serve:serverserve:client命令结合,开启本地服务(既可以看到服务端渲染的页面也可以看到客户端渲染的页面)。

    那么入口文件skeleton-entry.js中是什么呢?类似于main.js文件,创建一个vue实例,并将骨架屏组件引入,如下:

    // skeleton-entry.js
    import Vue from 'vue'
    import HelloWorldSkeleton from './HelloWorldSkeleton.vue'
    
    export default new Vue({
      components: {
        HelloWorldSkeleton
      },
      template: '<hello-world-skeleton />'
    })
    

    skeleton.js用于将服务端打包生成的json文件通过vue-server-renderer写入到index.html中,具体如下:

    // skeleton.js
    const fs = require('fs')
    const { resolve } = require('path')
    const bundle = require('./dist/vue-ssr-server-bundle.json')
    
    const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
    
    // 读取`skeleton.json`,以`index.html`为模板写入内容
    const renderer = createBundleRenderer(bundle, {
      template: fs.readFileSync(resolve(__dirname, './public/index.html'), 'utf-8')
    })
    
    // 把上一步模板完成的内容写入(替换)`index.html`
    renderer.renderToString({}, (err, html) => {
      console.log(html)
      fs.writeFileSync('./public/index.html', html, 'utf-8')
    })
    

    至此,在vue项目中引用骨架屏的demo就完成了,这只是一个简单的demo,实际项目中还需要考虑路由切换时骨架屏加载问题,以及开发过程中服务端渲染的热更新实现问题,后面将会继续深入。

    demo源码可在github上获取

    参考文献:

    [1] Vue页面骨架屏
    [2] Vue 页面骨架屏注入实践
    [3] 通过vue-cli3构建一个SSR应用程序

    展开全文
  • 原标题:Android 骨架屏效果,了解一下 以前做应用开发时,在数据尚未加载前一般会先给用户一个提示,最简单粗暴的方式就是菊花图,大多数做法是放一张有个性的静态图,示意正在加载数据,这样体验会好些,直到出现 ...

    原标题:Android 骨架屏效果,了解一下

    874526fa673e378ecf1d9aef853085fe.png

    以前做应用开发时,在数据尚未加载前一般会先给用户一个提示,最简单粗暴的方式就是菊花图,大多数做法是放一张有个性的静态图,示意正在加载数据,这样体验会好些,直到出现 Skeleton Screen(中文一般叫做骨架屏)极大地提升用户感知体验。其实一开始我并不知道这个效果叫什么名字,后来在 GitHub 看到有人开源了,赶紧 Star。今天我给大家推荐几个 Skeleton Screen 相关库,来了解学习一波。

    1、ShimmerRecyclerView

    简介

    A custom recycler view with shimmer views to indicate that views are loading (英语渣渣,这句话始终翻译不顺/捂脸)。

    效果预览

    fe44b3fbbd73f11cb54a588d3410403b.gif

    b1867b2968dc7e11b6f985bcc692b8b8.gif

    源码地址

    https://github.com/sharish/ShimmerRecyclerView

    2、Skeleton简介

    这个库提供了一种显示骨架加载视图的简便方法,它现在使用闪存动画的内存优化版本,因此速度更快,您也可以设置更大的布局动画。

    效果预览

    5425535845b68669197aa1d3a895a126.gif

    3da82f86dc24a24e7b98aecc1241b4a5.gif

    源码地址

    https://github.com/ethanhua/Skeleton

    3、spruce-android简介

    Spruce 是一个轻量级动画库,可帮助编排屏幕上的动画。该库同时支持 iOS。

    效果预览

    2929044181b2f26dcf4ed588eb65ea0c.gif

    源码地址

    https://github.com/willowtreeapps/spruce-android返回搜狐,查看更多

    责任编辑:

    展开全文
  • 骨架屏技术讲解以及使用方法写在前面骨架屏实现方式(原理分析)实现方式(具体实现) 写在前面 现在的前端开发领域,都是前后端分离,前端框架主流的都是 SPA,MPA;这就意味着,页面渲染以及等待的白屏时间,成为...

    写在前面

    现在的前端开发领域,都是前后端分离,前端框架主流的都是 SPAMPA;这就意味着,页面渲染以及等待的白屏时间,成为我们需要解决的问题点;而且大项目,这个问题尤为突出。

    webpack 可以实现按需加载,减小我们首屏需要加载的代码体积;再配合上 CDN 以及一些静态代码(框架,组件库等等…)缓存技术,可以很好的缓解这个加载渲染的时间过长的问题。

    但即便如此,首屏的加载依然还是存在这个加载以及渲染的等待时间问题;

    骨架屏是什么

    目前主流,常见的解决方案是使用骨架屏技术,包括很多原生的APP,在页面渲染时,也会使用骨架屏。(下图中,红圈中的部分,即为骨架屏在内容还没有出现之前的页面骨架填充,以免留白

    如何实现(原理分析)

    在 Vue 中,我们是通过 $mount 实例方法去挂载 vm 的;我们来简单看一下 Vue 代码里面关于 $mount 方法的实现:

    const mount = Vue.prototype.$mount
    Vue.prototype.$mount = function (
      el?: string | Element,
      hydrating?: boolean
    ): Component {
      el = el && query(el)
    
      /* istanbul ignore if */
      if (el === document.body || el === document.documentElement) {
        process.env.NODE_ENV !== 'production' && warn(
          `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
        )
        return this
      }
    
      const options = this.$options
      // resolve template/el and convert to render function
      if (!options.render) {
      	...
      }
      return mount.call(this, el, hydrating)
    }
    

    我们可以看到:这段代码首先缓存了原型上的 $mount 方法,再重新定义该方法,我们先来分析这段代码。首先,它对 el 做了限制,Vue 不能挂载在 body、html 这样的根节点上。为什么??

    因为render生成的vNode,通过 $mount 方法,挂载在我们的定义的 DOM 元素上;这里的挂载是【替换】的意思。

    默认情况下我们的模版 index.html 里面有一个 id 为 app 的 div 元素。我们最终的应用程序代码会替换掉这个元素,也就是 <div id="app"></div>;对,我们 Vue 渲染出来的内容是替换掉它,而不是插入在这个节点中。

    这也就是 Vue 不能挂载在 body、html 这样的根节点的原因。你总不能把 body、html 这样的元素节点替换掉把。

    知识点补充:
    如果没有定义 render 方法,则会把 el 或者 template 字符串转换成 render 方法。这里我们要牢记,在 Vue 2.0 版本中,所有 Vue 的组件的渲染最终都需要 render 方法,无论我们是用单文件 .vue 方式开发组件,还是写了 el 或者 template 属性,最终都会转换成 render 方法,那么这个过程是 Vue 的一个“在线编译”的过程,它是调用 compileToFunctions 方法实现的。最后,调用原先原型上的 $mount 方法挂载。

    参考: Vue 实例挂载的实现

    一个生动的例子

    在这里插入图片描述

    我们模版(index.html)里面的内容是这样的:

    <body>
      <div id="app">
        <span style="color: red;font-size: 34px;">你好</span>
      </div>
      <!-- built files will be auto injected -->
    </body>
    

    模版里面的挂载点是 div#appApp.vue 里面的根节点是 div#app-two,渲染完成以后,页面上的 div#app 就变成了 div#app-two

    那么,这里分析总结出来的最重要的一点就是:Vue 的 $mount 方法挂载元素,采用的是【替换】模版中的挂载点 这样的方法,知道了这个知识点以后,我们要实现骨架屏,就有了很好的实现思路了。

    实现方式(具体实现)

    方案一、在模版中来实现骨架屏

    思路:在 index.html 中的 div#app 中来实现骨架屏,程序渲染后就会替换掉 index.html 里面的 div#app 骨架屏内容;

    在这里插入图片描述
    ok,做完了;你觉得我这个骨架屏做的怎么样。

    方案二、使用一个Base64的图片来作为骨架屏

    使用图片作为骨架屏; 简单暴力,让UI同学花点功夫吧;小米商城的移动端页面采用的就是这个方法,它是使用了一个Base64的图片来作为骨架屏。

    按照方案一的方案,将这个 Base64 的图片写在我们的 index.html 模块中的 div#app 里面。

    方案三、使用 .vue 文件来完成骨架屏

    我们可能不希望在默认的模版(index.html)上来进行代码的coding;想在方案一的基础上,将骨架屏的代码抽离出来,使用一个 .vue 文件来 coding,易于维护。

    1、我们在 src 下建一个 skeleton 目录,在里面创建两个文件(skeleton.vueskeleton.entry.js);skeleton.vue 就是我们的骨架屏页面的代码,skeleton.entry.js 是编译 skeleton.vue 的入口文件,类似于我们 Vue 项目中的 main.js 文件;

    // skeleton.entry.js
    import Vue from 'vue'
    import Skeleton from './skeleton.vue'
    
    export default new Vue({
      // 根实例简单的渲染应用程序组件
      render: h => h(Skeleton)
    })
    
    <!-- skeleton.vue -->
    <template>
      <div class="skeleton page">
        <span>骨架屏</span>
      </div>
    </template>
    
    <style scoped>
    </style>
    

    2、我们还需要在新建一个 webpack.skeleton.conf.js 文件,以专门用来进行骨架屏的构建(这个文件放在哪里无所谓,可以放在根目录下,也可以放在 build 目录中)。这是一个 webpack 的配置文件,配合使用 vue-server-renderer 将我们的 skeleton.vue 文件内容构建为单个的 json 格式的文件(这是 Vue SSR 渲染的策略)

    // webpack.skeleton.conf.js
    'use strict'
    const path = require('path')
    const nodeExternals = require('webpack-node-externals')
    const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
    
    module.exports = {
      target: 'node',
      devtool: '#source-map',
      entry: './src/skeleton/skeleton.entry.js',
      output: {
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/dist/',
        filename: '[name].js',
        libraryTarget: 'commonjs2'
      },
      module: {
        noParse: /es6-promise\.js$/,  // avoid webpack shimming process
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              }
            }
          },
          {
            test: /\.css$/,
            use: ['vue-style-loader', 'css-loader']
          }
        ]
      },
      performance: {
        hints: false
      },
      externals: nodeExternals({
        // do not externalize CSS files in case we need to import it from a dep
        whitelist: /\.css$/
      }),
      plugins: [
        // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
        // 默认文件名为 `vue-ssr-server-bundle.json`
        new VueSSRServerPlugin({
          filename: 'skeleton.json'
        })
      ]
    }
    

    3、写完 skeleton.vue 的内容以后,使用 webpack-cli 运行这个 webpack.skeleton.conf.js 配置文件。

    // package.json
    "skeleton": "webpack --progress --config build/webpack.skeleton.conf.js"
    

    然后运行:

    npm i webpack-cli@3.3.10 -D
    npm run skeleton
    

    就会在 dist 文件夹中生成一个skeleton.json 文件。

    4、将 skeleton.json 内容插入到模版文件 index.html 中。(在根目录下创建一个 skeleton.js 文件)

    // skeleton.js
    const fs = require('fs')
    const { resolve } = require('path')
    const { createBundleRenderer } = require('vue-server-renderer')
    
    function createRenderer(bundle, options) {
      return createBundleRenderer(bundle, Object.assign(options, {
        // recommended for performance
        // runInNewContext: false
      }))
    }
    
    const handleError = err => {
      console.error(`error during render : ${req.url}`)
      console.error(err.stack)
    }
    
    const bundle = require('./dist/skeleton.json')
    const templatePath = resolve('./index.html')
    const template = fs.readFileSync(templatePath, 'utf-8')
    const renderer = createRenderer(bundle, {
      template
    })
    
    // console.log(renderer)
    
    /**
     * 说明:
     * 默认的index.html中包含<%= BASE_URL %>的插值语法
     * 我们不在生成骨架屏这一步改变模板中的这个插值
     * 因为这个插值会在项目构建时完成
     * 但是如果模板中有这个插值语法,而我们在vue-server-renderder中使用这个模板,而不传值的话,是会报错的
     * 所以,我们去掉模板中的插值,而使用这个传参的方式,再将这两个插值原模原样返回到模板中
     * 
     * 文档: https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E6%8F%92%E5%80%BC
     */
    const context = {
      title: '',  // default title
      meta: `<meta name="theme-color" content="#4285f4">
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        <link rel="stylesheet" href="<%= BASE_URL %>css/reset.css">`
    }
    
    renderer.renderToString(context, (err, html) => {
      if(err) {
        return handleError(err)
      }
      fs.writeFileSync(resolve(__dirname, './index.html'), html, 'utf-8')
    })
    

    5、模版 index.html 加上插槽注解
    这里需要注意的是:index.html 中的 div#app 中要加一个注解插槽,<!--vue-ssr-outlet--> 这个是必须的,Vue SSR 文档中有说这个。这个注解是必须的,请注意!

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>vue-for-test</title>
      </head>
      <body>
        <div id="app">
          <!--vue-ssr-outlet-->
        </div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    参考连接:https://ssr.vuejs.org/zh/guide/#%E4%BD%BF%E7%94%A8%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2%E6%A8%A1%E6%9D%BF

    6、执行

    node skeleton.js
    

    执行成功后,模版 index.html 中的 div#app 中的内容就会变成我们的骨架屏代码;

    7、看一下效果
    在这里插入图片描述
    这个骨架屏,你觉得效果如何?

    线上可以看到效果的例子也是有的: map-chart;记得选择,浏览器 -> network -> slow 3G 模式来预览 骨架屏效果。

    在方案三中,还涉及到了 Vue SSR 的内容,关于 SSR 的知识的学习,可以参考我之前写的一个教程: https://github.com/Neveryu/vue-ssr-lessons

    方案四、自动生成并自动插入静态骨架屏

    饿了么开源的插件 page-skeleton-webpack-plugin ,它根据项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中,不过要注意的是这个插件目前只支持 history 方式的路由,不支持 hash 方式,且目前只支持首页的骨架屏,并没有组件级的局部骨架屏实现,作者说以后会有计划实现(issue9)。

    另外还有个插件 vue-skeleton-webpack-plugin,它将插入骨架屏的方式由手动改为自动,原理在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点中,将样式内联到 head 标签中。这个插件可以给单页面的不同路由设置不同的骨架屏,也可以给多页面设置,同时为了开发时调试方便,会将骨架屏作为路由写入 router 中,可谓是相当体贴了。

    ---------------------------(正文完)------------------------------------
    一个前端的学习交流群,想进来面基的,可以点击这个logo ➹Vue学习交流,或者手动search群号:685486827,或者 qq 扫一扫

    Vue学习交流


    写在最后: 约定优于配置-------软件开发的简约原则.
    -------------------------------- (完)--------------------------------------

    我的:
    个人网站: https://neveryu.github.io/neveryu/
    Github: https://github.com/Neveryu
    新浪微博: https://weibo.com/Neveryu

    更多学习资源请关注我的新浪微博…

    展开全文
  • 1.骨架屏- skeleton 在页面加载完成之前,页面出现的骨架,有利于性能优化 作用:当网页加载过慢如果是白屏,影响用户体验, 也可以加loding 来防止白屏。但是更好的解决方案就是骨架屏 实现:ui设计图片,当网页...
  • vue+webpack骨架屏

    2021-01-20 12:18:08
    1、骨架屏原理 骨架屏其实就是在数据加载到id为app的div之前,先放置一个显示,可以是代码亦可以是文字图片等,数据加载之后会覆盖显示 优势:首页加载慢会导致白屏、卡顿问题,骨架屏优化用户体验 2、结合webpack...
  • vue-cli项目首页加载缓慢想要使用骨架屏效果,经过几天的踩坑,这里学习并记录一下vue项目自动生成骨架屏方法。 添加骨架屏,其优势在于: 写于HTML文件中,独立于Vue框架,节省了JS加载时间+JS全局环境创建的...
  • 骨架屏组件

    2019-11-28 22:27:43
    因此为了更进一步优化用户体验,就有了骨架屏;在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。具体代码点击查看骨架屏组件代码及实例 或者在微信小...
  • 微信小程序骨架屏

    2021-09-23 10:33:58
    骨架屏 - 官方地址 骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。通常在小程序中,我们需要手工维护骨架屏的代码,当业务...
  • 前端骨架屏

    2019-10-06 10:46:11
    骨架屏 最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的方案作了一下调研,骨架屏的实践已经有很多了,也有很多人对自己的方案作了介绍.在这里按照个人的理解做了一个汇总和分类,分享给大家. 关于骨架屏...
  • 在开发webapp的时候总是会受到首屏加载时间过长的影响,越来越多的APP采用了“骨架屏”的方式去提升用户体验。这篇文章主要介绍了Vue页面骨架屏的实现方法,感兴趣的小伙伴们可以参考一下
  • 主要介绍了Vue页面骨架屏注入的操作,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Vue骨架屏

    2019-08-02 17:55:26
    后来才知道这种模式称之为骨架屏骨架屏的出现无非也是为了提高性能优化并提高用户体验度。并且这种加载模式相比于菊花图,让用户在界面渲染未完成之前可以提前了解到页面的布局。提高了用户的体验度。 在学习了...
  • 前端骨架屏终极方案——骨架图

    万次阅读 2019-08-15 15:08:37
    骨架图代替骨架屏。用图片代替骨架屏!!! 主要还没尝试过自动生成方案,手工写感觉太麻烦(美工已经操起了板砖。。。) 最简单的实现方式,拿页面的UI效果图(或者直接手机截屏),然后把动态元素内容抹掉,一般...
  • 最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏",下面我们来简单了解一下吧
  • vue 骨架屏组件 TB骨架 (tb-skeleton) a vue component about toy bricks of skeleton screen loading. 关于骨架屏幕加载的玩具积木的vue组件。 View demo 查看演示 Page Demo 页面演示 安装 (install) $ npm i ...
  • 骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
  • vue骨架屏

    2019-03-22 11:42:38
    本文主要讲述vue-cli3.0项目中如何使用骨架屏技术提高用户体验。效果图如下: 文章是对Yinzhishan的简书内容的实践操作和整理,原文请戳前面链接。具体执行如下四步即可实现(本人亲测有效): 1.添加vue-...
  • vue引入骨架屏

    2020-10-13 19:24:39
    骨架屏骨架屏 骨架屏 骨架屏,英文 Skeleton screen ,是指在页面开始渲染之前的白屏时间内,先让用户看到即将要展现页面的“骨架”,页面渲染完成之后再将它替换掉,起到一个从 白屏 → 渲染完成 过程中的过渡作用...
  • 最新骨架屏方案梳理

    2019-11-29 11:30:52
    最新骨架屏方案梳理 什么是骨架屏 骨架屏是预渲染机制中一种增强用户体验的方式,可以理解为是当数据还未加载进来前,页面的一个空白版本,一个简单的关键渲染路径。可以看一下下面 Facebook 的骨架屏实现,可以...
  • 前言❝之前写移动端项目的时候,使用骨架屏来解决首屏渲染时出现短暂空白现象,采用了就是饿了么page-skeleton-webpack-plugin方法❞但是page-skeleton-we...
  • vue优化之骨架屏

    千次阅读 热门讨论 2019-07-01 10:13:29
    如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,当页面加载完成,骨架屏各个占位区域被实际资源替换,可...
  • 其中除了菊花图以外网上还流传这各种各样的loading动画,在PC端上几乎要统一江湖了,不过最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏" 概念 A skeleton...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,001
精华内容 3,200
关键字:

骨架屏