├── .babelrc ├── .editorconfig ├── .gitignore ├── .npmignore ├── README.md ├── VUE-CLI-README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── docs ├── index.html └── static │ ├── css │ ├── app.028d3b6bbf75d90cb8f5ffd4a7429be5.css │ ├── app.028d3b6bbf75d90cb8f5ffd4a7429be5.css.map │ └── reset.css │ ├── img │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.jpg │ ├── 13.jpg │ ├── 14.jpg │ ├── 15.jpg │ ├── 16.jpg │ ├── 17.jpg │ ├── 18.jpg │ ├── 19.jpg │ ├── 2.jpg │ ├── 20.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── 8.jpg │ └── 9.jpg │ └── js │ ├── app.11bec664eb96e0fa4323.js │ ├── app.11bec664eb96e0fa4323.js.map │ ├── manifest.6fb1e11b5717f84586a2.js │ ├── manifest.6fb1e11b5717f84586a2.js.map │ ├── vendor.7011277061e55994588c.js │ └── vendor.7011277061e55994588c.js.map ├── index.html ├── package.json ├── src ├── App.vue ├── components │ └── vue-preload-image.vue └── main.js └── static ├── .gitkeep ├── css └── reset.css └── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 16.jpg ├── 17.jpg ├── 18.jpg ├── 19.jpg ├── 2.jpg ├── 20.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg └── 9.jpg /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false, 8 | "env": { 9 | "test": { 10 | "plugins": [ "istanbul" ] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | static/ 6 | docs/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 为什么使用666-vue-preload-image 2 | 3 | 当网页中存在大量图片，且网速缓慢时，会带来极差的用户体验。 4 | 我们可以利用**加载页面**来**预加载图片资源**，获得流畅的用户体验。 5 | ## [DEMO](https://lfyfly.github.io/vue-preload-image/) 6 | ## [github](https://github.com/lfyfly/vue-preload-image) 7 | ## 适用于vue2.x 8 | ## 安装 9 | ``` 10 | npm install vue-preload-image --save-dev 11 | ``` 12 | ## 局部引用 13 | ```js 14 | import preloadImage from 'vue-preload-image' 15 | ``` 16 | ```js 17 | 18 | export default { 19 | name: 'app', 20 | components: { 21 | preloadImage 22 | } 23 | } 24 | 25 | ``` 26 | ## 全局引用(在main.js中) 27 | ```js 28 | import preloadImage from 'vue-preload-image' 29 | Vue.component('preload-image', preloadImage) 30 | ``` 31 | 32 | ## 组件参数 33 | ```js 34 | props: { 35 | // 需要预加载的图片url组成的数组 36 | imgUrlArr: { 37 | type: Array, 38 | required: true, 39 | }, 40 | // 控制显示 41 | animationShow: { // 控制加载动画的显示 42 | type: Boolean, 43 | default: true, 44 | }, 45 | tipStrShow: { // 控制文字提示信息的显示 46 | type: Boolean, 47 | default: true, 48 | }, 49 | progressShow: { // 控制图片加载进程文字的显示 50 | type: Boolean, 51 | default: true 52 | }, 53 | progressType: { // 图片加载进程文字的类型 54 | type: String, 55 | default: 'percent' // 'percent' 百分比类型 | 'count' 加载图片数量类型 56 | }, 57 | order: { // 图片有序加载的 58 | type: Boolean, 59 | default: true 60 | }, 61 | tipStr: { // 图片预加载中的提示语内容 62 | type: String, 63 | default: '图片预加载中...' 64 | } 65 | } 66 | ``` 67 | ## 组件事件 68 | ### imgAllLoader 69 | 图片全部加载完成后执行 70 | ```html 71 | 72 | ``` 73 | ## 通过slot使用自定义加载动画 74 | ```html 75 | 76 | 77 | 78 | ``` 79 | -------------------------------------------------------------------------------- /VUE-CLI-README.md: -------------------------------------------------------------------------------- 1 | # vue_origin 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | 17 | # build for production and view the bundle analyzer report 18 | npm run build --report 19 | ``` 20 | 21 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 22 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | var ora = require('ora') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var shell = require('shelljs') 10 | var webpack = require('webpack') 11 | var config = require('../config') 12 | var webpackConfig = require('./webpack.prod.conf') 13 | 14 | var spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 18 | shell.rm('-rf', assetsPath) 19 | shell.mkdir('-p', assetsPath) 20 | shell.config.silent = true 21 | shell.cp('-R', 'static/*', assetsPath) 22 | shell.config.silent = false 23 | 24 | webpack(webpackConfig, function (err, stats) { 25 | spinner.stop() 26 | if (err) throw err 27 | process.stdout.write(stats.toString({ 28 | colors: true, 29 | modules: false, 30 | children: false, 31 | chunks: false, 32 | chunkModules: false 33 | }) + '\n\n') 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {} 33 | }) 34 | // force page reload when html-webpack-plugin template changes 35 | compiler.plugin('compilation', function (compilation) { 36 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 37 | hotMiddleware.publish({ action: 'reload' }) 38 | cb() 39 | }) 40 | }) 41 | 42 | // proxy api requests 43 | Object.keys(proxyTable).forEach(function (context) { 44 | var options = proxyTable[context] 45 | if (typeof options === 'string') { 46 | options = { target: options } 47 | } 48 | app.use(proxyMiddleware(options.filter || context, options)) 49 | }) 50 | 51 | // handle fallback for HTML5 history API 52 | app.use(require('connect-history-api-fallback')()) 53 | 54 | // serve webpack bundle output 55 | app.use(devMiddleware) 56 | 57 | // enable hot-reload and state-preserving 58 | // compilation error display 59 | app.use(hotMiddleware) 60 | 61 | // serve pure static assets 62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 63 | app.use(staticPath, express.static('./static')) 64 | 65 | var uri = 'http://localhost:' + port 66 | 67 | devMiddleware.waitUntilValid(function () { 68 | console.log('> Listening at ' + uri + '\n') 69 | }) 70 | 71 | module.exports = app.listen(port, function (err) { 72 | if (err) { 73 | console.log(err) 74 | return 75 | } 76 | 77 | // when env is testing, don't need open it 78 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 79 | opn(uri) 80 | } 81 | }) 82 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | var isProduction = process.env.NODE_ENV === 'production' 15 | var cssLoader = 'css' + (isProduction ? '?minimize' : '') 16 | 17 | // generate loader string to be used with extract text plugin 18 | function generateLoaders (loader) { 19 | var loaders = [cssLoader] 20 | if (loader) loaders.push(loader) 21 | var sourceLoader = loaders.map(function (loader) { 22 | var extraParamChar 23 | if (/\?/.test(loader)) { 24 | loader = loader.replace(/\?/, '-loader?') 25 | extraParamChar = '&' 26 | } else { 27 | loader = loader + '-loader' 28 | extraParamChar = '?' 29 | } 30 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 31 | }) 32 | 33 | // Extract CSS when that option is specified 34 | // (which is the case during production build) 35 | if (options.extract) { 36 | return ExtractTextPlugin.extract({ 37 | use: sourceLoader, 38 | fallback: 'vue-style-loader' 39 | }) 40 | } else { 41 | return ['vue-style-loader'].concat(sourceLoader) 42 | } 43 | } 44 | 45 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 46 | return { 47 | css: generateLoaders(), 48 | postcss: generateLoaders(), 49 | less: generateLoaders('less'), 50 | sass: generateLoaders('sass?indentedSyntax'), 51 | scss: generateLoaders('sass'), 52 | stylus: generateLoaders('stylus'), 53 | styl: generateLoaders('stylus') 54 | } 55 | } 56 | 57 | // Generate loaders for standalone style files (outside of .vue) 58 | exports.styleLoaders = function (options) { 59 | var output = [] 60 | var loaders = exports.cssLoaders(options) 61 | for (var extension in loaders) { 62 | var loader = loaders[extension] 63 | output.push({ 64 | test: new RegExp('\\.' + extension + '$'), 65 | loader: loader 66 | }) 67 | } 68 | return output 69 | } 70 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | postcss: [ 13 | require('autoprefixer')({ 14 | browsers: ['last 2 versions'] 15 | }) 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | modules: [ 24 | resolve('src'), 25 | resolve('node_modules') 26 | ], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.common.js', 29 | 'src': resolve('src'), 30 | 'assets': resolve('src/assets'), 31 | 'components': resolve('src/components') 32 | } 33 | }, 34 | module: { 35 | rules: [ 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue-loader', 39 | options: vueLoaderConfig 40 | }, 41 | { 42 | test: /\.js$/, 43 | loader: 'babel-loader', 44 | include: [resolve('src'), resolve('test')] 45 | }, 46 | { 47 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 48 | loader: 'url-loader', 49 | query: { 50 | limit: 10000, 51 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 52 | } 53 | }, 54 | { 55 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 56 | loader: 'url-loader', 57 | query: { 58 | limit: 10000, 59 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 60 | } 61 | } 62 | ] 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var HtmlWebpackPlugin = require('html-webpack-plugin') 8 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 9 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 10 | 11 | var env = config.build.env 12 | 13 | var webpackConfig = merge(baseWebpackConfig, { 14 | module: { 15 | rules: utils.styleLoaders({ 16 | sourceMap: config.build.productionSourceMap, 17 | extract: true 18 | }) 19 | }, 20 | devtool: config.build.productionSourceMap ? '#source-map' : false, 21 | output: { 22 | path: config.build.assetsRoot, 23 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 24 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 25 | }, 26 | plugins: [ 27 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 28 | new webpack.DefinePlugin({ 29 | 'process.env': env 30 | }), 31 | new webpack.optimize.UglifyJsPlugin({ 32 | compress: { 33 | warnings: false 34 | }, 35 | sourceMap: true 36 | }), 37 | // extract css into its own file 38 | new ExtractTextPlugin({ 39 | filename: utils.assetsPath('css/[name].[contenthash].css') 40 | }), 41 | // Compress extracted CSS. We are using this plugin so that possible 42 | // duplicated CSS from different components can be deduped. 43 | new OptimizeCSSPlugin(), 44 | // generate dist index.html with correct asset hash for caching. 45 | // you can customize output by editing /index.html 46 | // see https://github.com/ampedandwired/html-webpack-plugin 47 | new HtmlWebpackPlugin({ 48 | filename: config.build.index, 49 | template: 'index.html', 50 | inject: true, 51 | minify: { 52 | removeComments: true, 53 | collapseWhitespace: true, 54 | removeAttributeQuotes: true 55 | // more options: 56 | // https://github.com/kangax/html-minifier#options-quick-reference 57 | }, 58 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 59 | chunksSortMode: 'dependency' 60 | }), 61 | // split vendor js into its own file 62 | new webpack.optimize.CommonsChunkPlugin({ 63 | name: 'vendor', 64 | minChunks: function (module, count) { 65 | // any required modules inside node_modules are extracted to vendor 66 | return ( 67 | module.resource && 68 | /\.js$/.test(module.resource) && 69 | module.resource.indexOf( 70 | path.join(__dirname, '../node_modules') 71 | ) === 0 72 | ) 73 | } 74 | }), 75 | // extract webpack runtime and module manifest to its own file in order to 76 | // prevent vendor hash from being updated whenever app bundle is updated 77 | new webpack.optimize.CommonsChunkPlugin({ 78 | name: 'manifest', 79 | chunks: ['vendor'] 80 | }) 81 | ] 82 | }) 83 | 84 | if (config.build.productionGzip) { 85 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 86 | 87 | webpackConfig.plugins.push( 88 | new CompressionWebpackPlugin({ 89 | asset: '[path].gz[query]', 90 | algorithm: 'gzip', 91 | test: new RegExp( 92 | '\\.(' + 93 | config.build.productionGzipExtensions.join('|') + 94 | ')$' 95 | ), 96 | threshold: 10240, 97 | minRatio: 0.8 98 | }) 99 | ) 100 | } 101 | 102 | if (config.build.bundleAnalyzerReport) { 103 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 104 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 105 | } 106 | 107 | module.exports = webpackConfig 108 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: './', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | vue-preload-image DEMO
-------------------------------------------------------------------------------- /docs/static/css/app.028d3b6bbf75d90cb8f5ffd4a7429be5.css: -------------------------------------------------------------------------------- 1 | body,html{height:100%;width:100%;margin:0;padding:0}#app .imgs-container{background:#000}#app .imgs-container img{width:25%}#app.is-mobile .imgs-container img{width:50%}.vue-preload-image{position:absolute;top:0;left:0;width:100%;height:100%;display:table;text-align:center}.vue-preload-image .progress{display:table-cell;vertical-align:middle}.vue-preload-image .progress p{margin:0}.vue-preload-image .progress .tip-str{margin-top:.4em}.vue-preload-image .progress .loadingAnimation{width:60px;height:60px;background-color:#67cf22;margin:0 auto;animation:a 1.2s infinite ease-in-out}@keyframes a{0%{transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}} -------------------------------------------------------------------------------- /docs/static/css/app.028d3b6bbf75d90cb8f5ffd4a7429be5.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack:///src/App.vue","webpack:///webpack:///src/components/vue-preload-image.vue"],"names":[],"mappings":"AACA,UAEE,YACA,WACA,SACA,SAAW,CAEb,qBACE,eAAiB,CAEnB,yBACI,SAAW,CAEf,mCACE,SAAW,CCdb,mBACE,kBACA,MACA,OACA,WACA,YACA,cACA,iBAAmB,CAErB,6BACI,mBACA,qBAAuB,CAE3B,+BACM,QAAU,CAEhB,sCACM,eAAiB,CAEvB,+CACM,WACA,YACA,yBACA,cACA,+CAAiD,CAEvD,uBACA,GACI,wDAA0D,CAE9D,IACI,6DAA+D,CAEnE,GACI,gEAAkE,CACrE","file":"static/css/app.028d3b6bbf75d90cb8f5ffd4a7429be5.css","sourcesContent":["\nhtml,\nbody {\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n#app .imgs-container {\n background: #000;\n}\n#app .imgs-container img {\n width: 25%;\n}\n#app.is-mobile .imgs-container img {\n width: 50%;\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/App.vue","\n.vue-preload-image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: table;\n text-align: center;\n}\n.vue-preload-image .progress {\n display: table-cell;\n vertical-align: middle;\n}\n.vue-preload-image .progress p {\n margin: 0;\n}\n.vue-preload-image .progress .tip-str {\n margin-top: .4em;\n}\n.vue-preload-image .progress .loadingAnimation {\n width: 60px;\n height: 60px;\n background-color: #67CF22;\n margin: 0 auto;\n animation: rotateplane 1.2s infinite ease-in-out;\n}\n@keyframes rotateplane {\n0% {\n transform: perspective(120px) rotateX(0deg) rotateY(0deg);\n}\n50% {\n transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\n}\n100% {\n transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\n}\n}\n\n\n\n// WEBPACK FOOTER //\n// webpack:///src/components/vue-preload-image.vue"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/css/reset.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } 2 | 3 | body { color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } 4 | 5 | a { color:#555; text-decoration:none; } 6 | 7 | li{list-style:none;} 8 | 9 | .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} 10 | .clearfix { *zoom:1; } -------------------------------------------------------------------------------- /docs/static/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/1.jpg -------------------------------------------------------------------------------- /docs/static/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/10.jpg -------------------------------------------------------------------------------- /docs/static/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/11.jpg -------------------------------------------------------------------------------- /docs/static/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/12.jpg -------------------------------------------------------------------------------- /docs/static/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/13.jpg -------------------------------------------------------------------------------- /docs/static/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/14.jpg -------------------------------------------------------------------------------- /docs/static/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/15.jpg -------------------------------------------------------------------------------- /docs/static/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/16.jpg -------------------------------------------------------------------------------- /docs/static/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/17.jpg -------------------------------------------------------------------------------- /docs/static/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/18.jpg -------------------------------------------------------------------------------- /docs/static/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/19.jpg -------------------------------------------------------------------------------- /docs/static/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/2.jpg -------------------------------------------------------------------------------- /docs/static/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/20.jpg -------------------------------------------------------------------------------- /docs/static/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/3.jpg -------------------------------------------------------------------------------- /docs/static/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/4.jpg -------------------------------------------------------------------------------- /docs/static/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/5.jpg -------------------------------------------------------------------------------- /docs/static/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/6.jpg -------------------------------------------------------------------------------- /docs/static/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/7.jpg -------------------------------------------------------------------------------- /docs/static/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/8.jpg -------------------------------------------------------------------------------- /docs/static/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/docs/static/img/9.jpg -------------------------------------------------------------------------------- /docs/static/js/app.11bec664eb96e0fa4323.js: -------------------------------------------------------------------------------- 1 | webpackJsonp([0,2],[,function(t,e,i){i(5);var r=i(0)(i(3),i(8),null,null);t.exports=r.exports},,function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=i(7),s=i.n(r);e.default={name:"app",components:{preloadImage:s.a},data:function(){return{imgUrls:["static/img/1.jpg","static/img/2.jpg","static/img/3.jpg","static/img/4.jpg","static/img/5.jpg","static/img/6.jpg","static/img/7.jpg","static/img/8.jpg","static/img/9.jpg","static/img/10.jpg","static/img/11.jpg","static/img/12.jpg"],preLoaded:!1,isMobile:!!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)}},methods:{fn:function(){this.preLoaded=!0}}}},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"vue-preload-image",props:{imgUrlArr:{type:Array,required:!0},animationShow:{type:Boolean,default:!0},tipStrShow:{type:Boolean,default:!0},progressShow:{type:Boolean,default:!0},progressType:{type:String,default:"percent"},order:{type:Boolean,default:!0},tipStr:{type:String,default:"图片预加载中..."}},data:function(){return{msg:"this is from vue-preload-image.vue",show:!0,progressStr:"",imgsSum:NaN,loadedCount:0}},methods:{init:function(){this.imgsSum=this.imgUrlArr.length,this.progressStr="percent"===this.progressType?"0%":"0/"+this.imgsSum},unorderedPreload:function(){var t=this;this.imgUrlArr.forEach(function(e,i){var r=new Image;r.addEventListener("load",t.imgLoaded),r.addEventListener("error",t.imgLoaded),r.src=e})},orderPreload:function(){var t=new Image;t.addEventListener("load",this.imgLoaded),t.addEventListener("error",this.imgLoaded),t.src=this.imgUrlArr[this.loadedCount]},imgLoaded:function(){this.loadedCount++,this.progressStr="percent"===this.progressType?parseInt(100*this.loadedCount/this.imgsSum)+"%":this.loadedCount+"/"+this.imgsSum,this.loadedCount>=this.imgsSum?(this.show=!1,this.$emit("imgAllLoaded")):this.order&&this.orderPreload()}},created:function(){this.init(),this.order?this.orderPreload():this.unorderedPreload()}}},function(t,e){},function(t,e){},function(t,e,i){i(6);var r=i(0)(i(4),i(9),null,null);t.exports=r.exports},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:{"is-mobile":t.isMobile},attrs:{id:"app"}},[i("preload-image",{attrs:{imgUrlArr:t.imgUrls},on:{imgAllLoaded:t.fn}}),t.preLoaded?i("div",{staticClass:"imgs-container"},t._l(t.imgUrls,function(t,e){return i("img",{attrs:{src:t,alt:"第"+(e+1)+"张图片",title:"第"+(e+1)+"张图片"}})})):t._e()],1)},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.show?i("div",{staticClass:"vue-preload-image"},[i("div",{staticClass:"progress"},[t._t("default"),t.animationShow?i("div",{staticClass:"loadingAnimation loadingAnimation"}):t._e(),t.tipStrShow?i("p",{staticClass:"tip-str"},[t._v(t._s(t.tipStr))]):t._e(),t.progressShow?i("p",{staticClass:"progress-str"},[t._v(t._s(t.progressStr))]):t._e()],2)]):t._e()},staticRenderFns:[]}},,,function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=i(2),s=i.n(r),o=i(1),a=i.n(o);new s.a({el:"#app",template:"",components:{App:a.a}})}],[12]); 2 | //# sourceMappingURL=app.11bec664eb96e0fa4323.js.map -------------------------------------------------------------------------------- /docs/static/js/app.11bec664eb96e0fa4323.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/app.11bec664eb96e0fa4323.js","webpack:///./src/App.vue","webpack:///App.vue","webpack:///vue-preload-image.vue","webpack:///./src/components/vue-preload-image.vue","webpack:///./src/App.vue?7850","webpack:///./src/components/vue-preload-image.vue?8499","webpack:///./src/main.js"],"names":["webpackJsonp","module","exports","__webpack_require__","Component","__webpack_exports__","Object","defineProperty","value","__WEBPACK_IMPORTED_MODULE_0_components_vue_preload_image_vue__","__WEBPACK_IMPORTED_MODULE_0_components_vue_preload_image_vue___default","n","name","components","preloadImage","a","data","imgUrls","preLoaded","isMobile","navigator","userAgent","match","methods","fn","this","props","imgUrlArr","type","Array","required","animationShow","Boolean","default","tipStrShow","progressShow","progressType","String","order","tipStr","msg","show","progressStr","imgsSum","NaN","loadedCount","init","length","unorderedPreload","_this","forEach","imgUrl","i","oImg","Image","addEventListener","imgLoaded","src","orderPreload","parseInt","$emit","created","render","_vm","_h","$createElement","_c","_self","class","is-mobile","attrs","id","on","imgAllLoaded","staticClass","_l","v","alt","title","_e","staticRenderFns","_t","_v","_s","__WEBPACK_IMPORTED_MODULE_0_vue__","__WEBPACK_IMPORTED_MODULE_0_vue___default","__WEBPACK_IMPORTED_MODULE_1__App__","__WEBPACK_IMPORTED_MODULE_1__App___default","el","template","App"],"mappings":"AAAAA,cAAc,EAAE,IACT,CAED,SAAUC,EAAQC,EAASC,GCDjCA,EAAA,EAEA,IAAAC,GAAAD,EAAA,GAEAA,EAAA,GAEAA,EAAA,GAEA,KAEA,KAGAF,GAAAC,QAAAE,EAAAF,SDSO,CAED,SAAUD,EAAQI,EAAqBF,GAE7C,YACAG,QAAOC,eAAeF,EAAqB,cAAgBG,OAAO,GAC7C,IAAIC,GAAiEN,EAAoB,GACrFO,EAAyEP,EAAoBQ,EAAEF,EEnBxHJ,GAAA,SFyBEO,KEvBF,MFwBEC,YErBFC,aAAAJ,EAAAK,GFwBEC,KAAM,WACJ,OACEC,SAAU,mBAAoB,mBAAoB,mBAAoB,mBAAoB,mBAAoB,mBAAoB,mBAAoB,mBAAoB,mBAAoB,oBAAqB,oBEtBzN,qBFwBMC,WEvBN,EFwBMC,WAAYC,UAAUC,UAAUC,MEtBtC,gCF0BEC,SACEC,GAAI,WACFC,KAAKP,WExBX,MF+BM,SAAUjB,EAAQI,EAAqBF,GAE7C,YACAG,QAAOC,eAAeF,EAAqB,cAAgBG,OAAO,IGHlEH,EAAA,SHOEO,KGLF,oBHMEc,OACEC,WACEC,KGJNC,MHKMC,UGFN,GHKIC,eACEH,KGJNI,QHKMC,SGHN,GHKIC,YACEN,KGJNI,QHKMC,SGHN,GHKIE,cACEP,KGJNI,QHKMC,SGHN,GHKIG,cACER,KGJNS,OHKMJ,QGHN,WHIIK,OACEV,KGHNI,QHIMC,SGFN,GHIIM,QACEX,KGHNS,OHIMJ,QGDN,cHIEjB,KAAM,WACJ,OACEwB,IGHN,qCHIMC,MGHN,EHIMC,YGHN,GHIMC,QGHNC,IHIMC,YGFN,IHMEtB,SACEuB,KAAM,WACJrB,KAAKkB,QAAUlB,KAAKE,UGJ1BoB,OHKMtB,KAAKiB,YAAoC,YAAtBjB,KAAKW,aAA6B,KAAO,KAAOX,KGJzEkB,SHMIK,iBAAkB,WGJtB,GAAAC,GAAAxB,IHOMA,MAAKE,UAAUuB,QAAQ,SAAUC,EAAQC,GACvC,GAAIC,GAAO,GGNnBC,MHOQD,GAAKE,iBAAiB,OAAQN,EGNtCO,WHOQH,EAAKE,iBAAiB,QAASN,EGNvCO,WHOQH,EAAKI,IGNbN,KHSIO,aAAc,WACZ,GAAIL,GAAO,GGNjBC,MHOMD,GAAKE,iBAAiB,OAAQ9B,KGNpC+B,WHOMH,EAAKE,iBAAiB,QAAS9B,KGNrC+B,WHOMH,EAAKI,IAAMhC,KAAKE,UAAUF,KGNhCoB,cHQIW,UAAW,WACT/B,KGNNoB,cHOMpB,KAAKiB,YAAoC,YAAtBjB,KAAKW,aAA6BuB,SAA4B,IAAnBlC,KAAKoB,YAAoBpB,KAAKkB,SAAW,IAAMlB,KAAKoB,YAAc,IAAMpB,KGL5IkB,QHOUlB,KAAKoB,aAAepB,KAAKkB,SAC3BlB,KAAKgB,MGNb,EHOQhB,KAAKmC,MGNb,iBHOiBnC,KAAKa,OACdb,KGNRiC,iBHUEG,QAAS,WACPpC,KGNJqB,OHOIrB,KAAKa,MAAQb,KAAKiC,eAAiBjC,KGLvCuB,sBHWM,SAAU/C,EAAQC,KAMlB,SAAUD,EAAQC,KAMlB,SAAUD,EAAQC,EAASC,GI9JjCA,EAAA,EAEA,IAAAC,GAAAD,EAAA,GAEAA,EAAA,GAEAA,EAAA,GAEA,KAEA,KAGAF,GAAAC,QAAAE,EAAAF,SJuKM,SAAUD,EAAQC,GKtLxBD,EAAAC,SAAgB4D,OAAA,WAAmB,GAAAC,GAAAtC,KAAauC,EAAAD,EAAAE,eAA0BC,EAAAH,EAAAI,MAAAD,IAAAF,CAC1E,OAAAE,GAAA,OACAE,OACAC,YAAAN,EAAA5C,UAEAmD,OACAC,GAAA,SAEGL,EAAA,iBACHI,OACA3C,UAAAoC,EAAA9C,SAEAuD,IACAC,aAAAV,EAAAvC,MAEGuC,EAAA,UAAAG,EAAA,OACHQ,YAAA,kBACGX,EAAAY,GAAAZ,EAAA,iBAAAa,EAAAxB,GACH,MAAAc,GAAA,OACAI,OACAb,IAAAmB,EACAC,IAAA,KAAAzB,EAAA,SACA0B,MAAA,KAAA1B,EAAA,eAGGW,EAAAgB,MAAA,IACFC,qBL4LK,SAAU/E,EAAQC,GMtNxBD,EAAAC,SAAgB4D,OAAA,WAAmB,GAAAC,GAAAtC,KAAauC,EAAAD,EAAAE,eAA0BC,EAAAH,EAAAI,MAAAD,IAAAF,CAC1E,OAAAD,GAAA,KAAAG,EAAA,OACAQ,YAAA,sBACGR,EAAA,OACHQ,YAAA,aACGX,EAAAkB,GAAA,WAAAlB,EAAA,cAAAG,EAAA,OACHQ,YAAA,sCACGX,EAAAgB,KAAAhB,EAAA,WAAAG,EAAA,KACHQ,YAAA,YACGX,EAAAmB,GAAAnB,EAAAoB,GAAApB,EAAAxB,WAAAwB,EAAAgB,KAAAhB,EAAA,aAAAG,EAAA,KACHQ,YAAA,iBACGX,EAAAmB,GAAAnB,EAAAoB,GAAApB,EAAArB,gBAAAqB,EAAAgB,MAAA,KAAAhB,EAAAgB,MACFC,qBN2NO,CACA,CAEF,SAAU/E,EAAQI,EAAqBF,GAE7C,YACAG,QAAOC,eAAeF,EAAqB,cAAgBG,OAAO,GAC7C,IAAI4E,GAAoCjF,EAAoB,GACxDkF,EAA4ClF,EAAoBQ,EAAEyE,GAClEE,EAAqCnF,EAAoB,GACzDoF,EAA6CpF,EAAoBQ,EAAE2E,EO3O5F,IAAID,GAAAtE,GACFyE,GAAI,OACJC,SAAU,SACV5E,YAAc6E,IAAAH,EAAAxE,QPoPb","file":"static/js/app.11bec664eb96e0fa4323.js","sourcesContent":["webpackJsonp([0,2],[\n/* 0 */,\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\n/* styles */\n__webpack_require__(5)\n\nvar Component = __webpack_require__(0)(\n /* script */\n __webpack_require__(3),\n /* template */\n __webpack_require__(8),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n/* 2 */,\n/* 3 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_components_vue_preload_image_vue__ = __webpack_require__(7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_components_vue_preload_image_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_components_vue_preload_image_vue__);\n\n\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = {\n name: 'app',\n components: {\n preloadImage: __WEBPACK_IMPORTED_MODULE_0_components_vue_preload_image_vue___default.a\n },\n data: function data() {\n return {\n imgUrls: ['static/img/1.jpg', 'static/img/2.jpg', 'static/img/3.jpg', 'static/img/4.jpg', 'static/img/5.jpg', 'static/img/6.jpg', 'static/img/7.jpg', 'static/img/8.jpg', 'static/img/9.jpg', 'static/img/10.jpg', 'static/img/11.jpg', 'static/img/12.jpg'],\n\n preLoaded: false,\n isMobile: !!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)\n };\n },\n\n methods: {\n fn: function fn() {\n this.preLoaded = true;\n }\n }\n};\n\n/***/ }),\n/* 4 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n\n\n/* harmony default export */ __webpack_exports__[\"default\"] = {\n name: 'vue-preload-image',\n props: {\n imgUrlArr: {\n type: Array,\n required: true\n },\n\n animationShow: {\n type: Boolean,\n default: true\n },\n tipStrShow: {\n type: Boolean,\n default: true\n },\n progressShow: {\n type: Boolean,\n default: true\n },\n progressType: {\n type: String,\n default: 'percent' },\n order: {\n type: Boolean,\n default: true\n },\n tipStr: {\n type: String,\n default: '图片预加载中...'\n }\n },\n data: function data() {\n return {\n msg: 'this is from vue-preload-image.vue',\n show: true,\n progressStr: '',\n imgsSum: NaN,\n loadedCount: 0\n };\n },\n\n methods: {\n init: function init() {\n this.imgsSum = this.imgUrlArr.length;\n this.progressStr = this.progressType === 'percent' ? '0%' : '0/' + this.imgsSum;\n },\n unorderedPreload: function unorderedPreload() {\n var _this = this;\n\n this.imgUrlArr.forEach(function (imgUrl, i) {\n var oImg = new Image();\n oImg.addEventListener('load', _this.imgLoaded);\n oImg.addEventListener('error', _this.imgLoaded);\n oImg.src = imgUrl;\n });\n },\n orderPreload: function orderPreload() {\n var oImg = new Image();\n oImg.addEventListener('load', this.imgLoaded);\n oImg.addEventListener('error', this.imgLoaded);\n oImg.src = this.imgUrlArr[this.loadedCount];\n },\n imgLoaded: function imgLoaded() {\n this.loadedCount++;\n this.progressStr = this.progressType === 'percent' ? parseInt(this.loadedCount * 100 / this.imgsSum) + '%' : this.loadedCount + '/' + this.imgsSum;\n\n if (this.loadedCount >= this.imgsSum) {\n this.show = false;\n this.$emit('imgAllLoaded');\n } else if (this.order) {\n this.orderPreload();\n }\n }\n },\n created: function created() {\n this.init();\n this.order ? this.orderPreload() : this.unorderedPreload();\n }\n};\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports) {\n\n// removed by extract-text-webpack-plugin\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\n/* styles */\n__webpack_require__(6)\n\nvar Component = __webpack_require__(0)(\n /* script */\n __webpack_require__(4),\n /* template */\n __webpack_require__(9),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n class: {\n 'is-mobile': _vm.isMobile\n },\n attrs: {\n \"id\": \"app\"\n }\n }, [_c('preload-image', {\n attrs: {\n \"imgUrlArr\": _vm.imgUrls\n },\n on: {\n \"imgAllLoaded\": _vm.fn\n }\n }), (_vm.preLoaded) ? _c('div', {\n staticClass: \"imgs-container\"\n }, _vm._l((_vm.imgUrls), function(v, i) {\n return _c('img', {\n attrs: {\n \"src\": v,\n \"alt\": (\"第\" + (i+1) + \"张图片\"),\n \"title\": (\"第\" + (i+1) + \"张图片\")\n }\n })\n })) : _vm._e()], 1)\n},staticRenderFns: []}\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports) {\n\nmodule.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return (_vm.show) ? _c('div', {\n staticClass: \"vue-preload-image\"\n }, [_c('div', {\n staticClass: \"progress\"\n }, [_vm._t(\"default\"), (_vm.animationShow) ? _c('div', {\n staticClass: \"loadingAnimation loadingAnimation\"\n }) : _vm._e(), (_vm.tipStrShow) ? _c('p', {\n staticClass: \"tip-str\"\n }, [_vm._v(_vm._s(_vm.tipStr))]) : _vm._e(), (_vm.progressShow) ? _c('p', {\n staticClass: \"progress-str\"\n }, [_vm._v(_vm._s(_vm.progressStr))]) : _vm._e()], 2)]) : _vm._e()\n},staticRenderFns: []}\n\n/***/ }),\n/* 10 */,\n/* 11 */,\n/* 12 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__App___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__App__);\n\n\n\n\nnew __WEBPACK_IMPORTED_MODULE_0_vue___default.a({\n el: '#app',\n template: '',\n components: { App: __WEBPACK_IMPORTED_MODULE_1__App___default.a }\n});\n\n/***/ })\n],[12]);\n\n\n// WEBPACK FOOTER //\n// static/js/app.11bec664eb96e0fa4323.js","\n/* styles */\nrequire(\"!!./../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?minimize&sourceMap!./../node_modules/vue-loader/lib/style-rewriter?{\\\"id\\\":\\\"data-v-2a1c808e\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":true}!sass-loader?sourceMap!./../node_modules/vue-loader/lib/selector?type=styles&index=0!./App.vue\")\n\nvar Component = require(\"!./../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!./../node_modules/vue-loader/lib/selector?type=script&index=0!./App.vue\"),\n /* template */\n require(\"!!./../node_modules/vue-loader/lib/template-compiler?{\\\"id\\\":\\\"data-v-2a1c808e\\\"}!./../node_modules/vue-loader/lib/template-loader?raw&engine=pug!./../node_modules/vue-loader/lib/selector?type=template&index=0!./App.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/App.vue\n// module id = 1\n// module chunks = 0","\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// App.vue?690fb70e","\n\n\n\n\n\n\n\n\n\n\n// WEBPACK FOOTER //\n// vue-preload-image.vue?7b9d304a","\n/* styles */\nrequire(\"!!./../../node_modules/extract-text-webpack-plugin/loader.js?{\\\"omit\\\":1,\\\"remove\\\":true}!vue-style-loader!css-loader?minimize&sourceMap!./../../node_modules/vue-loader/lib/style-rewriter?{\\\"id\\\":\\\"data-v-b13c5562\\\",\\\"scoped\\\":false,\\\"hasInlineConfig\\\":true}!sass-loader?sourceMap!./../../node_modules/vue-loader/lib/selector?type=styles&index=0!./vue-preload-image.vue\")\n\nvar Component = require(\"!./../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!./../../node_modules/vue-loader/lib/selector?type=script&index=0!./vue-preload-image.vue\"),\n /* template */\n require(\"!!./../../node_modules/vue-loader/lib/template-compiler?{\\\"id\\\":\\\"data-v-b13c5562\\\"}!./../../node_modules/vue-loader/lib/template-loader?raw&engine=pug!./../../node_modules/vue-loader/lib/selector?type=template&index=0!./vue-preload-image.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/components/vue-preload-image.vue\n// module id = 7\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return _c('div', {\n class: {\n 'is-mobile': _vm.isMobile\n },\n attrs: {\n \"id\": \"app\"\n }\n }, [_c('preload-image', {\n attrs: {\n \"imgUrlArr\": _vm.imgUrls\n },\n on: {\n \"imgAllLoaded\": _vm.fn\n }\n }), (_vm.preLoaded) ? _c('div', {\n staticClass: \"imgs-container\"\n }, _vm._l((_vm.imgUrls), function(v, i) {\n return _c('img', {\n attrs: {\n \"src\": v,\n \"alt\": (\"第\" + (i+1) + \"张图片\"),\n \"title\": (\"第\" + (i+1) + \"张图片\")\n }\n })\n })) : _vm._e()], 1)\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?{\"id\":\"data-v-2a1c808e\"}!./~/vue-loader/lib/template-loader.js?raw&engine=pug!./~/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue\n// module id = 8\n// module chunks = 0","module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;\n return (_vm.show) ? _c('div', {\n staticClass: \"vue-preload-image\"\n }, [_c('div', {\n staticClass: \"progress\"\n }, [_vm._t(\"default\"), (_vm.animationShow) ? _c('div', {\n staticClass: \"loadingAnimation loadingAnimation\"\n }) : _vm._e(), (_vm.tipStrShow) ? _c('p', {\n staticClass: \"tip-str\"\n }, [_vm._v(_vm._s(_vm.tipStr))]) : _vm._e(), (_vm.progressShow) ? _c('p', {\n staticClass: \"progress-str\"\n }, [_vm._v(_vm._s(_vm.progressStr))]) : _vm._e()], 2)]) : _vm._e()\n},staticRenderFns: []}\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./~/vue-loader/lib/template-compiler.js?{\"id\":\"data-v-b13c5562\"}!./~/vue-loader/lib/template-loader.js?raw&engine=pug!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/vue-preload-image.vue\n// module id = 9\n// module chunks = 0","// The Vue build version to load with the `import` command\n// (runtime-only or standalone) has been set in webpack.base.conf with an alias.\nimport Vue from 'vue'\nimport App from './App'\n\n/* eslint-disable no-new */\nnew Vue({\n el: '#app',\n template: '',\n components: { App }\n})\n\n\n\n// WEBPACK FOOTER //\n// ./src/main.js"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/manifest.6fb1e11b5717f84586a2.js: -------------------------------------------------------------------------------- 1 | !function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s-1)return e.splice(n,1)}}function a(e,t){return ai.call(e,t)}function s(e){return"string"==typeof e||"number"==typeof e}function c(e){var t=Object.create(null);return function(n){var r=t[n];return r||(t[n]=e(n))}}function u(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n}function l(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function f(e,t){for(var n in t)e[n]=t[n];return e}function p(e){return null!==e&&"object"==typeof e}function d(e){return pi.call(e)===di}function v(e){for(var t={},n=0;n1?l(n):n;for(var r=l(arguments,1),i=0,o=n.length;i=0&&Qi[n].id>e.id;)n--;Qi.splice(Math.max(n,no)+1,0,e)}else Qi.push(e);eo||(eo=!0,Si(Ae))}}function Se(e){oo.clear(),Te(e,oo)}function Te(e,t){var n,r,i=Array.isArray(e);if((i||p(e))&&Object.isExtensible(e)){if(e.__ob__){var o=e.__ob__.dep.id;if(t.has(o))return;t.add(o)}if(i)for(n=e.length;n--;)Te(e[n],t);else for(r=Object.keys(e),n=r.length;n--;)Te(e[r[n]],t)}}function Ee(e){e._watchers=[];var t=e.$options;t.props&&je(e,t.props),t.methods&&Le(e,t.methods),t.data?Ie(e):O(e._data={},!0),t.computed&&Ne(e,t.computed),t.watch&&De(e,t.watch)}function je(e,t){var n=e.$options.propsData||{},r=e.$options._propKeys=Object.keys(t),i=!e.$parent;Pi.shouldConvert=i;for(var o=function(i){var o=r[i];S(e,o,U(o,t,n,e))},a=0;a-1:e.test(t)}function Ge(e,t){for(var n in e){var r=e[n];if(r){var i=We(r.componentOptions);i&&!t(i)&&(Ye(r),e[n]=null)}}}function Ye(e){e&&(e.componentInstance._inactive||xe(e.componentInstance,"deactivated"),e.componentInstance.$destroy())}function Qe(e){var t={};t.get=function(){return mi},Object.defineProperty(e,"config",t),e.util=Bi,e.set=T,e.delete=E,e.nextTick=Si,e.options=Object.create(null),mi._assetTypes.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,f(e.options.components,lo),Ve(e),Je(e),qe(e),Ke(e)}function Xe(e){for(var t=e.data,n=e,r=e;r.componentInstance;)r=r.componentInstance._vnode,r.data&&(t=et(r.data,t));for(;n=n.parent;)n.data&&(t=et(t,n.data));return tt(t)}function et(e,t){return{staticClass:nt(e.staticClass,t.staticClass),class:e.class?[e.class,t.class]:t.class}}function tt(e){var t=e.class,n=e.staticClass;return n||t?nt(n,rt(t)):""}function nt(e,t){return e?t?e+" "+t:e:t||""}function rt(e){var t="";if(!e)return t;if("string"==typeof e)return e;if(Array.isArray(e)){for(var n,r=0,i=e.length;r-1?Oo[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:Oo[e]=/HTMLUnknownElement/.test(t.toString())}function at(e){if("string"==typeof e){if(e=document.querySelector(e),!e)return document.createElement("div")}return e}function st(e,t){var n=document.createElement(e);return"select"!==e?n:(t.data&&t.data.attrs&&"multiple"in t.data.attrs&&n.setAttribute("multiple","multiple"),n)}function ct(e,t){return document.createElementNS(wo[e],t)}function ut(e){return document.createTextNode(e)}function lt(e){return document.createComment(e)}function ft(e,t,n){e.insertBefore(t,n)}function pt(e,t){e.removeChild(t)}function dt(e,t){e.appendChild(t)}function vt(e){return e.parentNode}function ht(e){return e.nextSibling}function mt(e){return e.tagName}function gt(e,t){e.textContent=t}function yt(e,t,n){e.setAttribute(t,n)}function _t(e,t){var n=e.data.ref;if(n){var r=e.context,i=e.componentInstance||e.elm,a=r.$refs;t?Array.isArray(a[n])?o(a[n],i):a[n]===i&&(a[n]=void 0):e.data.refInFor?Array.isArray(a[n])&&a[n].indexOf(i)<0?a[n].push(i):a[n]=[i]:a[n]=i}}function bt(e){return null==e}function $t(e){return null!=e}function wt(e,t){return e.key===t.key&&e.tag===t.tag&&e.isComment===t.isComment&&!e.data==!t.data}function Ct(e,t,n){var r,i,o={};for(r=t;r<=n;++r)i=e[r].key,$t(i)&&(o[i]=r);return o}function xt(e){function t(e){return new Hi(O.tagName(e).toLowerCase(),{},[],void 0,e)}function n(e,t){function n(){0===--n.listeners&&r(e)}return n.listeners=t,n}function r(e){var t=O.parentNode(e);t&&O.removeChild(t,e)}function o(e,t,n,r,i){if(e.isRootInsert=!i,!a(e,t,n,r)){var o=e.data,s=e.children,c=e.tag;$t(c)?(e.elm=e.ns?O.createElementNS(e.ns,c):O.createElement(c,e),v(e),f(e,s,t),$t(o)&&d(e,t),l(n,e.elm,r)):e.isComment?(e.elm=O.createComment(e.text),l(n,e.elm,r)):(e.elm=O.createTextNode(e.text),l(n,e.elm,r))}}function a(e,t,n,r){var i=e.data;if($t(i)){var o=$t(e.componentInstance)&&i.keepAlive;if($t(i=i.hook)&&$t(i=i.init)&&i(e,!1,n,r),$t(e.componentInstance))return c(e,t),o&&u(e,t,n,r),!0}}function c(e,t){e.data.pendingInsert&&t.push.apply(t,e.data.pendingInsert),e.elm=e.componentInstance.$el,p(e)?(d(e,t),v(e)):(_t(e),t.push(e))}function u(e,t,n,r){for(var i,o=e;o.componentInstance;)if(o=o.componentInstance._vnode,$t(i=o.data)&&$t(i=i.transition)){for(i=0;ip?(u=bt(n[m+1])?null:n[m+1].elm,h(e,u,n,f,m,r)):f>m&&g(e,t,l,p)}function b(e,t,n,r){if(e!==t){if(t.isStatic&&e.isStatic&&t.key===e.key&&(t.isCloned||t.isOnce))return t.elm=e.elm,void(t.componentInstance=e.componentInstance);var i,o=t.data,a=$t(o);a&&$t(i=o.hook)&&$t(i=i.prepatch)&&i(e,t);var s=t.elm=e.elm,c=e.children,u=t.children;if(a&&p(t)){for(i=0;i-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+e.getAttribute("class")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Jt(e,t){if(t&&t.trim())if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t);else{for(var n=" "+e.getAttribute("class")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");e.setAttribute("class",n.trim())}}function qt(e){Xo(function(){Xo(e)})}function Kt(e,t){(e._transitionClasses||(e._transitionClasses=[])).push(t),Vt(e,t)}function Wt(e,t){e._transitionClasses&&o(e._transitionClasses,t),Jt(e,t)}function Zt(e,t,n){var r=Gt(e,t),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===Ko?Go:Qo,c=0,u=function(){e.removeEventListener(s,l),n()},l=function(t){t.target===e&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ko,l=a,f=o.length):t===Wo?u>0&&(n=Wo,l=u,f=c.length):(l=Math.max(a,u),n=l>0?a>u?Ko:Wo:null,f=n?n===Ko?o.length:c.length:0);var p=n===Ko&&ea.test(r[Zo+"Property"]);return{type:n,timeout:l,propCount:f,hasTransform:p}}function Yt(e,t){for(;e.length1,I=n._enterCb=nn(function(){E&&(Wt(n,k),Wt(n,x)),I.cancelled?(E&&Wt(n,C),T&&T(n)):S&&S(n),n._enterCb=null});e.data.show||ie(e.data.hook||(e.data.hook={}),"insert",function(){var t=n.parentNode,r=t&&t._pending&&t._pending[e.key];r&&r.tag===e.tag&&r.elm._leaveCb&&r.elm._leaveCb(),O&&O(n,I)},"transition-insert"),A&&A(n),E&&(Kt(n,C),Kt(n,x),qt(function(){Kt(n,k),Wt(n,C),I.cancelled||j||Zt(n,o,I)})),e.data.show&&(t&&t(),O&&O(n,I)),E||j||I()}}}function en(e,t){function n(){g.cancelled||(e.data.show||((r.parentNode._pending||(r.parentNode._pending={}))[e.key]=e),l&&l(r),h&&(Kt(r,s),Kt(r,u),qt(function(){Kt(r,c),Wt(r,s),g.cancelled||m||Zt(r,a,g)})),f&&f(r,g),h||m||g())}var r=e.elm;r._enterCb&&(r._enterCb.cancelled=!0,r._enterCb());var i=tn(e.data.transition);if(!i)return t();if(!r._leaveCb&&1===r.nodeType){var o=i.css,a=i.type,s=i.leaveClass,c=i.leaveToClass,u=i.leaveActiveClass,l=i.beforeLeave,f=i.leave,p=i.afterLeave,d=i.leaveCancelled,v=i.delayLeave,h=o!==!1&&!wi,m=f&&(f._length||f.length)>1,g=r._leaveCb=nn(function(){r.parentNode&&r.parentNode._pending&&(r.parentNode._pending[e.key]=null),h&&(Wt(r,c),Wt(r,u)),g.cancelled?(h&&Wt(r,s),d&&d(r)):(t(),p&&p(r)),r._leaveCb=null});v?v(n):n()}}function tn(e){if(e){if("object"==typeof e){var t={};return e.css!==!1&&f(t,ta(e.name||"v")),f(t,e),t}return"string"==typeof e?ta(e):void 0}}function nn(e){var t=!1;return function(){t||(t=!0,e())}}function rn(e,t){t.data.show||Xt(t)}function on(e,t,n){var r=t.value,i=e.multiple;if(!i||Array.isArray(r)){for(var o,a,s=0,c=e.options.length;s-1,a.selected!==o&&(a.selected=o);else if(g(sn(a),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function an(e,t){for(var n=0,r=t.length;n',n.innerHTML.indexOf(t)>0}function $n(e){return va=va||document.createElement("div"),va.innerHTML=e,va.textContent}function wn(e,t){return t&&(e=e.replace(ss,"\n")),e.replace(os,"<").replace(as,">").replace(cs,"&").replace(us,'"')}function Cn(e,t){function n(t){f+=t,e=e.substring(t)}function r(){var t=e.match(ka);if(t){var r={tagName:t[1],attrs:[],start:f};n(t[0].length);for(var i,o;!(i=e.match(Aa))&&(o=e.match(wa));)n(o[0].length),r.attrs.push(o);if(i)return r.unarySlash=i[1],n(i[0].length),r.end=f,r}}function i(e){var n=e.tagName,r=e.unarySlash;u&&("p"===s&&ya(n)&&o(s),ga(n)&&s===n&&o(n));for(var i=l(n)||"html"===n&&"head"===s||!!r,a=e.attrs.length,f=new Array(a),p=0;p=0&&c[i].lowerCasedTag!==o;i--);else i=0;if(i>=0){for(var a=c.length-1;a>=i;a--)t.end&&t.end(c[a].tag,n,r);c.length=i,s=i&&c[i-1].tag}else"br"===o?t.start&&t.start(e,[],!0,n,r):"p"===o&&(t.start&&t.start(e,[],!1,n,r),t.end&&t.end(e,n,r))}for(var a,s,c=[],u=t.expectHTML,l=t.isUnaryTag||vi,f=0;e;){if(a=e,s&&rs(s)){var p=s.toLowerCase(),d=is[p]||(is[p]=new RegExp("([\\s\\S]*?)(]*>)","i")),v=0,h=e.replace(d,function(e,n,r){return v=r.length,"script"!==p&&"style"!==p&&"noscript"!==p&&(n=n.replace(//g,"$1").replace(//g,"$1")),t.chars&&t.chars(n),""});f+=e.length-h.length,e=h,o(p,f-v,f)}else{var m=e.indexOf("<");if(0===m){if(Ta.test(e)){var g=e.indexOf("-->");if(g>=0){n(g+3);continue}}if(Ea.test(e)){var y=e.indexOf("]>");if(y>=0){n(y+2);continue}}var _=e.match(Sa);if(_){n(_[0].length);continue}var b=e.match(Oa);if(b){var $=f;n(b[0].length),o(b[1],$,f);continue}var w=r();if(w){i(w);continue}}var C=void 0,x=void 0,k=void 0;if(m>0){for(x=e.slice(m);!(Oa.test(x)||ka.test(x)||Ta.test(x)||Ea.test(x)||(k=x.indexOf("<",1),k<0));)m+=k,x=e.slice(m);C=e.substring(0,m),n(m)}m<0&&(C=e,e=""),t.chars&&C&&t.chars(C)}if(e===a&&t.chars){t.chars(e);break}}o()}function xn(e){function t(){(a||(a=[])).push(e.slice(v,i).trim()),v=i+1}var n,r,i,o,a,s=!1,c=!1,u=!1,l=!1,f=0,p=0,d=0,v=0;for(i=0;i=0&&(m=e.charAt(h)," "===m);h--);m&&/[\w$]/.test(m)||(l=!0)}}else void 0===o?(v=i+1,o=e.slice(0,i).trim()):t();if(void 0===o?o=e.slice(0,i).trim():0!==v&&t(),a)for(i=0;ia&&o.push(JSON.stringify(e.slice(a,i)));var s=xn(r[1].trim());o.push("_s("+s+")"),a=i+r[0].length}return a=Ia}function Rn(e){return 34===e||39===e}function Un(e){var t=1;for(Da=La;!Pn();)if(e=Dn(),Rn(e))Fn(e);else if(91===e&&t++,93===e&&t--,0===t){Pa=La;break}}function Fn(e){for(var t=e;!Pn()&&(e=Dn(),e!==t););}function Bn(e,t){Ra=t.warn||On,Ua=t.getTagNamespace||vi,Fa=t.mustUseProp||vi,Ba=t.isPreTag||vi,Ha=Sn(t.modules,"preTransformNode"),za=Sn(t.modules,"transformNode"),Va=Sn(t.modules,"postTransformNode"),Ja=t.delimiters;var n,r,i=[],o=t.preserveWhitespace!==!1,a=!1,s=!1;return Cn(e,{expectHTML:t.expectHTML,isUnaryTag:t.isUnaryTag,shouldDecodeNewlines:t.shouldDecodeNewlines,start:function(e,o,c){function u(e){}var l=r&&r.ns||Ua(e);$i&&"svg"===l&&(o=or(o));var f={type:1,tag:e,attrsList:o,attrsMap:rr(o),parent:r,children:[]};l&&(f.ns=l),ir(f)&&!Ai()&&(f.forbidden=!0);for(var p=0;p-1"+("true"===o?":("+t+")":":_q("+t+","+o+")")),In(e,"click","var $$a="+t+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$c){$$i<0&&("+t+"=$$a.concat($$v))}else{$$i>-1&&("+t+"=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{"+t+"=$$c}",null,!0)}function Kr(e,t,n){var r=n&&n.number,i=Nn(e,"value")||"null";i=r?"_n("+i+")":i,Tn(e,"checked","_q("+t+","+i+")"),In(e,"click",Gr(t,i),null,!0)}function Wr(e,t,n){var r=e.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=o||$i&&"range"===r?"change":"input",u=!o&&"range"!==r,l="input"===e.tag||"textarea"===e.tag,f=l?"$event.target.value"+(s?".trim()":""):s?"(typeof $event === 'string' ? $event.trim() : $event)":"$event";f=a||"number"===r?"_n("+f+")":f;var p=Gr(t,f);l&&u&&(p="if($event.target.composing)return;"+p),Tn(e,"value",l?"_s("+t+")":"("+t+")"),In(e,c,p,null,!0),(s||a||"number"===r)&&In(e,"blur","$forceUpdate()")}function Zr(e,t,n){var r=n&&n.number,i='Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(r?"_n(val)":"val")+"})"+(null==e.attrsMap.multiple?"[0]":""),o=Gr(t,i);In(e,"change",o,null,!0)}function Gr(e,t){var n=Ln(e);return null===n.idx?e+"="+t:"var $$exp = "+n.exp+", $$idx = "+n.idx+";if (!Array.isArray($$exp)){"+e+"="+t+"}else{$$exp.splice($$idx, 1, "+t+")}"}function Yr(e,t){t.value&&Tn(e,"textContent","_s("+t.value+")")}function Qr(e,t){t.value&&Tn(e,"innerHTML","_s("+t.value+")")}function Xr(e,t){return t=t?f(f({},Ms),t):Ms,Fr(e,t)}function ei(e,t,n){var r=(t&&t.warn||Ei,t&&t.delimiters?String(t.delimiters)+e:e);if(Ns[r])return Ns[r];var i={},o=Xr(e,t);i.render=ti(o.render);var a=o.staticRenderFns.length;i.staticRenderFns=new Array(a);for(var s=0;s0,Ci=bi&&bi.indexOf("edge/")>0,xi=bi&&bi.indexOf("android")>0,ki=bi&&/iphone|ipad|ipod|ios/.test(bi),Ai=function(){return void 0===ri&&(ri=!_i&&"undefined"!=typeof t&&"server"===t.process.env.VUE_ENV),ri},Oi=_i&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__,Si=function(){function e(){r=!1;var e=n.slice(0);n.length=0;for(var t=0;t1&&(t[n[0].trim()]=n[1].trim())}}),t}),Fo=/^--/,Bo=/\s*!important$/,Ho=function(e,t,n){Fo.test(t)?e.style.setProperty(t,n):Bo.test(n)?e.style.setProperty(t,n.replace(Bo,""),"important"):e.style[Vo(t)]=n},zo=["Webkit","Moz","ms"],Vo=c(function(e){if(po=po||document.createElement("div"),e=ci(e),"filter"!==e&&e in po.style)return e;for(var t=e.charAt(0).toUpperCase()+e.slice(1),n=0;n\/=]+)/,ba=/(?:=)/,$a=[/"([^"]*)"+/.source,/'([^']*)'+/.source,/([^\s"'=<>`]+)/.source],wa=new RegExp("^\\s*"+_a.source+"(?:\\s*("+ba.source+")\\s*(?:"+$a.join("|")+"))?"),Ca="[a-zA-Z_][\\w\\-\\.]*",xa="((?:"+Ca+"\\:)?"+Ca+")",ka=new RegExp("^<"+xa),Aa=/^\s*(\/?)>/,Oa=new RegExp("^<\\/"+xa+"[^>]*>"),Sa=/^]+>/i,Ta=/^ 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-preload-image", 3 | "version": "1.0.3", 4 | "description": "Image preloading component of vue", 5 | "author": "lfyfly <410793635@qq.com>", 6 | "main": "./src/components/vue-preload-image.vue", 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "node-sass": "^4.5.3", 13 | "vue": "^2.1.10" 14 | }, 15 | "devDependencies": { 16 | "autoprefixer": "^6.7.2", 17 | "babel-core": "^6.22.1", 18 | "babel-loader": "^6.2.10", 19 | "babel-plugin-transform-runtime": "^6.22.0", 20 | "babel-preset-es2015": "^6.22.0", 21 | "babel-preset-stage-2": "^6.22.0", 22 | "babel-register": "^6.22.0", 23 | "chalk": "^1.1.3", 24 | "connect-history-api-fallback": "^1.3.0", 25 | "css-loader": "^0.26.1", 26 | "eventsource-polyfill": "^0.9.6", 27 | "express": "^4.14.1", 28 | "extract-text-webpack-plugin": "^2.0.0-rc.2", 29 | "file-loader": "^0.10.0", 30 | "friendly-errors-webpack-plugin": "^1.1.3", 31 | "function-bind": "^1.1.0", 32 | "highlightjs": "^9.10.0", 33 | "html-webpack-plugin": "^2.28.0", 34 | "http-proxy-middleware": "^0.17.3", 35 | "opn": "^4.0.2", 36 | "optimize-css-assets-webpack-plugin": "^1.3.0", 37 | "ora": "^1.1.0", 38 | "pug": "^2.0.0-beta11", 39 | "sass-loader": "^6.0.1", 40 | "semver": "^5.3.0", 41 | "shelljs": "^0.7.6", 42 | "url-loader": "^0.5.7", 43 | "vue-loader": "^11.0.0", 44 | "vue-style-loader": "^2.0.0", 45 | "vue-template-compiler": "^2.1.10", 46 | "webpack": "^2.2.1", 47 | "webpack-bundle-analyzer": "^2.2.1", 48 | "webpack-dev-middleware": "^1.10.0", 49 | "webpack-hot-middleware": "^2.16.1", 50 | "webpack-merge": "^2.6.1" 51 | }, 52 | "engines": { 53 | "node": ">= 4.0.0", 54 | "npm": ">= 3.0.0" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 33 | 34 | 60 | -------------------------------------------------------------------------------- /src/components/vue-preload-image.vue: -------------------------------------------------------------------------------- 1 | 2 | 44 | 45 | 46 | 55 | 56 | 57 | 141 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | template: '', 10 | components: { App } 11 | }) 12 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/.gitkeep -------------------------------------------------------------------------------- /static/css/reset.css: -------------------------------------------------------------------------------- 1 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; } 2 | 3 | body { color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } 4 | 5 | a { color:#555; text-decoration:none; } 6 | 7 | li{list-style:none;} 8 | 9 | .clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;} 10 | .clearfix { *zoom:1; } -------------------------------------------------------------------------------- /static/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/1.jpg -------------------------------------------------------------------------------- /static/img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/10.jpg -------------------------------------------------------------------------------- /static/img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/11.jpg -------------------------------------------------------------------------------- /static/img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/12.jpg -------------------------------------------------------------------------------- /static/img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/13.jpg -------------------------------------------------------------------------------- /static/img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/14.jpg -------------------------------------------------------------------------------- /static/img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/15.jpg -------------------------------------------------------------------------------- /static/img/16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/16.jpg -------------------------------------------------------------------------------- /static/img/17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/17.jpg -------------------------------------------------------------------------------- /static/img/18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/18.jpg -------------------------------------------------------------------------------- /static/img/19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/19.jpg -------------------------------------------------------------------------------- /static/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/2.jpg -------------------------------------------------------------------------------- /static/img/20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/20.jpg -------------------------------------------------------------------------------- /static/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/3.jpg -------------------------------------------------------------------------------- /static/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/4.jpg -------------------------------------------------------------------------------- /static/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/5.jpg -------------------------------------------------------------------------------- /static/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/6.jpg -------------------------------------------------------------------------------- /static/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/7.jpg -------------------------------------------------------------------------------- /static/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/8.jpg -------------------------------------------------------------------------------- /static/img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lfyfly/vue-preload-image/bf7d71c3494f5fdac04c07753ea9a20ed9f380cf/static/img/9.jpg --------------------------------------------------------------------------------