优化首页动态视觉加载性能
（改成cdn加速，可能对中国大陆用户不太友好？）
This commit is contained in:
parent
22a130b6ef
commit
90eac27dae
GPG Key ID:
D7A9EC07024C3021
@ -1,13 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace app\assets;
|
||||
|
||||
use yii\web\AssetBundle;
|
||||
|
||||
class EChartsLiquidFillAsset extends AssetBundle
|
||||
{
|
||||
public $sourcePath = '@npm/echarts-liquidfill/dist';
|
||||
public $js = [
|
||||
'echarts-liquidfill.js',
|
||||
];
|
||||
}
|
||||
@ -6,8 +6,8 @@ use yii\web\AssetBundle;
|
||||
|
||||
class TSParticlesAsset extends AssetBundle
|
||||
{
|
||||
public $sourcePath = '@npm/tsparticles--slim';
|
||||
//use remote js file instead of local file (for better performance?)
|
||||
public $js = [
|
||||
'tsparticles.slim.bundle.min.js',
|
||||
'https://cdn.jsdelivr.net/npm/@tsparticles/slim@3.4.0/tsparticles.slim.bundle.min.js'
|
||||
];
|
||||
}
|
||||
@ -51,9 +51,7 @@
|
||||
"kartik-v/yii2-editable": "dev-master",
|
||||
"chenx221/yii2-bootstrap5": "dev-master",
|
||||
"npm-asset/echarts": "^5.5",
|
||||
"npm-asset/echarts-liquidfill": "^3.1",
|
||||
"npm-asset/quill": "^1.3",
|
||||
"npm-asset/tsparticles--slim": "3.3.0",
|
||||
"ext-mbstring": "*"
|
||||
},
|
||||
"require-dev": {
|
||||
|
||||
@ -21,7 +21,7 @@ $config = [
|
||||
'authManager' => [
|
||||
'class' => 'yii\rbac\DbManager',
|
||||
// uncomment if you want to cache RBAC items hierarchy
|
||||
// 'cache' => 'cache',
|
||||
// 'cache' => 'cache',
|
||||
],
|
||||
'request' => [
|
||||
// !!! insert a secret key in the following (if it is empty) - this is required by cookie validation
|
||||
|
||||
@ -9,7 +9,6 @@ use yii\helpers\Url;
|
||||
|
||||
$this->title = '首页';
|
||||
TSParticlesAsset::register($this);
|
||||
//$latestAnnouncements = []; emulating empty data
|
||||
?>
|
||||
<div id="tsparticles" style="position: absolute;z-index: -1"></div>
|
||||
<div class="site-index">
|
||||
@ -105,75 +104,144 @@ $(document).ready(function() {
|
||||
});
|
||||
});
|
||||
});
|
||||
async function loadParticles(options) {
|
||||
(async () => {
|
||||
await loadSlim(tsParticles);
|
||||
|
||||
await tsParticles.load({ id: "tsparticles", options });
|
||||
}
|
||||
|
||||
const configs = {
|
||||
fpsLimit: 60,
|
||||
particles: {
|
||||
number: {
|
||||
value: 100,
|
||||
density: {
|
||||
enable: true,
|
||||
area: 800
|
||||
}
|
||||
},
|
||||
color: {
|
||||
value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
|
||||
},
|
||||
shape: {
|
||||
type: "circle"
|
||||
},
|
||||
opacity: {
|
||||
value: 0.4
|
||||
},
|
||||
size: {
|
||||
value: { min: 4, max: 8 }
|
||||
},
|
||||
links: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: "#808080",
|
||||
opacity: 0.4,
|
||||
width: 1
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 1,
|
||||
outModes: {
|
||||
default: "out"
|
||||
}
|
||||
}
|
||||
},
|
||||
interactivity: {
|
||||
events: {
|
||||
onHover: {
|
||||
enable: true,
|
||||
mode: "grab"
|
||||
await tsParticles.load({
|
||||
id: "tsparticles",
|
||||
options: {
|
||||
fpsLimit: 60,
|
||||
particles: {
|
||||
number: {
|
||||
value: 100,
|
||||
density: {
|
||||
enable: true,
|
||||
area: 800
|
||||
}
|
||||
},
|
||||
color: {
|
||||
value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
|
||||
},
|
||||
shape: {
|
||||
type: "circle"
|
||||
},
|
||||
opacity: {
|
||||
value: 0.4
|
||||
},
|
||||
size: {
|
||||
value: { min: 4, max: 8 }
|
||||
},
|
||||
links: {
|
||||
enable: true,
|
||||
distance: 150,
|
||||
color: "#808080",
|
||||
opacity: 0.4,
|
||||
width: 1
|
||||
},
|
||||
move: {
|
||||
enable: true,
|
||||
speed: 1,
|
||||
outModes: {
|
||||
default: "out"
|
||||
}
|
||||
}
|
||||
},
|
||||
onClick: {
|
||||
enable: true,
|
||||
mode: "push"
|
||||
interactivity: {
|
||||
events: {
|
||||
onHover: {
|
||||
enable: true,
|
||||
mode: "grab"
|
||||
},
|
||||
onClick: {
|
||||
enable: true,
|
||||
mode: "push"
|
||||
}
|
||||
},
|
||||
modes: {
|
||||
grab: {
|
||||
distance: 230,
|
||||
links: {
|
||||
opacity: 1,
|
||||
color: "#808080"
|
||||
}
|
||||
},
|
||||
push: {
|
||||
quantity: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
modes: {
|
||||
grab: {
|
||||
distance: 230,
|
||||
links: {
|
||||
opacity: 1,
|
||||
color: "#808080"
|
||||
}
|
||||
},
|
||||
push: {
|
||||
quantity: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
loadParticles(configs).then(r => console.log("Particles loaded"));
|
||||
});
|
||||
})();
|
||||
// async function loadParticles(options) {
|
||||
//
|
||||
// await tsParticles.load({ id: "tsparticles", options });
|
||||
// }
|
||||
//
|
||||
// const configs = {
|
||||
// fpsLimit: 60,
|
||||
// particles: {
|
||||
// number: {
|
||||
// value: 100,
|
||||
// density: {
|
||||
// enable: true,
|
||||
// area: 800
|
||||
// }
|
||||
// },
|
||||
// color: {
|
||||
// value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"]
|
||||
// },
|
||||
// shape: {
|
||||
// type: "circle"
|
||||
// },
|
||||
// opacity: {
|
||||
// value: 0.4
|
||||
// },
|
||||
// size: {
|
||||
// value: { min: 4, max: 8 }
|
||||
// },
|
||||
// links: {
|
||||
// enable: true,
|
||||
// distance: 150,
|
||||
// color: "#808080",
|
||||
// opacity: 0.4,
|
||||
// width: 1
|
||||
// },
|
||||
// move: {
|
||||
// enable: true,
|
||||
// speed: 1,
|
||||
// outModes: {
|
||||
// default: "out"
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// interactivity: {
|
||||
// events: {
|
||||
// onHover: {
|
||||
// enable: true,
|
||||
// mode: "grab"
|
||||
// },
|
||||
// onClick: {
|
||||
// enable: true,
|
||||
// mode: "push"
|
||||
// }
|
||||
// },
|
||||
// modes: {
|
||||
// grab: {
|
||||
// distance: 230,
|
||||
// links: {
|
||||
// opacity: 1,
|
||||
// color: "#808080"
|
||||
// }
|
||||
// },
|
||||
// push: {
|
||||
// quantity: 4
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
//
|
||||
// loadParticles(configs).then(r => console.log("Particles loaded"));
|
||||
|
||||
JS;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user