增加了图片预加载

zjq1394288160 · Jul 30, 2018 · c73c410 · c73c410
1 parent 36da87f
commit c73c410
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 19 deletions.
diff --git a/src/routes/Home/index.js b/src/routes/Home/index.js
@@ -2,28 +2,20 @@ import React from 'react'
 import {Carousel} from 'antd'
 import './style.css'
 
+const imgs = [
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide1.jpg?raw=true',
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide2.jpg?raw=true',
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide3.jpg?raw=true',
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide4.jpg?raw=true'
+]
+
 class Home extends React.Component {
   render() {
     return (
       <div style={styles.bg} className='home'>
         <Carousel arrows effect='fade' className='size'>
-          <div>
-            <div className='size' style={{backgroundImage:'url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-343369.jpg)'}}/>
-          </div>
-          <div>
-            <div className='size' style={{backgroundImage:'url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-4871.jpg)'}}/>
-          </div>
-          <div>
-            <div className='size' style={{backgroundImage:'url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-486302.jpg)'}}/>
-          </div>
-          <div>
-            <div className='size' style={{backgroundImage:'url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-75202.jpg)'}}/>
-          </div>
+          {imgs.map(item=><div key={item}><div className='size' style={{backgroundImage:`url(${item})`}}/></div>)}
           {/*不用img标签是因为图片大小会出现问题*/}
-          {/*<img style={styles.size} src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-343369.jpg" alt="" />*/}
-          {/*<img style={styles.size} src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-4871.jpg" alt="" />*/}
-          {/*<img style={styles.size} src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-486302.jpg" alt="" />*/}
-          {/*<img style={styles.size} src="https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-75202.jpg" alt="" />*/}
         </Carousel>
       </div>
     )

diff --git a/src/routes/Login/index.js b/src/routes/Login/index.js
@@ -7,9 +7,15 @@ import PromptBox from '../../components/PromptBox'
 import { withRouter } from 'react-router-dom'
 import { inject, observer } from 'mobx-react/index'
 import Loading from '../../components/Loading'
+import {preloadingImages} from '../../utils/utils'
 
-// const url = 'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg5.jpg?raw=true'
-const url = 'https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-654485.jpg'
+const url = 'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg1.jpg?raw=true'
+const imgs = [
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide1.jpg?raw=true',
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide2.jpg?raw=true',
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide3.jpg?raw=true',
+  'https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/slide4.jpg?raw=true'
+]
 
 @withRouter @inject('appStore') @observer @Form.create()
 class LoginForm extends React.Component {
@@ -308,6 +314,7 @@ class Login extends React.Component {
 
   componentDidMount () {
     this.initPage()
+    preloadingImages(imgs)  //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
   }
 
   componentWillUnmount () {
@@ -392,7 +399,7 @@ const styles = {
     width: '100vw',
     height: '100vh',
     // backgroundImage: 'url(https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg5.jpg?raw=true)',
-    backgroundImage: 'url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-654485.jpg)',
+    backgroundImage: 'url(https://github.com/zhangZhiHao1996/image-store/blob/master/react-admin-master/bg1.jpg?raw=true)',
     backgroundSize: '100% 100%',
     transition:'all .5s'
   },

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -51,4 +51,16 @@ export function randomNum(min, max) {
  */
 export function calculateWidth(arr){
   return 30 + arr[0].length*15
+}
+
+/**
+ * 图片预加载
+ * @param arr
+ * @constructor
+ */
+export function preloadingImages(arr) {
+  arr.forEach(item=>{
+    const img = new Image()
+    img.src = item
+  })
 }