php - 网站轮播图如何加载速度快
给我你的怀抱
给我你的怀抱 2017-05-16 12:59:36
0
4
636

进入首页 首页的轮播图6张 是从数据库里面读取地址加载出来的 打开时候需要加载很久 请问有什么方法吗 排除懒加载 图片已经进行过压缩

给我你的怀抱
给我你的怀抱

répondre à tous(4)
巴扎黑

Vous pouvez utiliser le préchargement, il sera chargé lors de votre visite

黄舟
  1. Si possible, utilisez webp ou tinyPNG pour les photos ;

  2. Taille pour correspondre à la taille réelle du composant du carrousel, ou créer une autre vignette

  3.  ;
  4. CDN;

  5. http/1.x mis à niveau vers http/2 ;

  6. Cache vers localStorage, le format est base64, définit un mécanisme de rechargement d'expiration
    ...

  7.  ;

J'en ajouterai plus quand j'y penserai

阿神

Méthode simple, rapide et sans seuil :

  1. Configurez vous-même la compression gzip sur le serveur

  2. Dépensez de l'argent pour obtenir un petit stockage de fichiers + CDN à servir ensemble, comme Qiniu, OSS, Youpai...

Plus compliqué, un peu seuil, et cela dépend si cela convient au scénario d'application spécifique :

  1. Envisagez d'utiliser l'effet de chargement paresseux similaire de Zhihu, mais il est bien meilleur que l'expérience de chargement paresseux traditionnelle, pleine de style, divisez la taille de l'image selon la logique (ou utilisez l'API du service cdn pour modifier les paramètres) , le chargement par défaut est une petite image, puis chargez la grande image avec des effets de transition.

Veuillez consulter ce lien pour l'effet : https://zhuanlan.zhihu.com/p/...
Petite photo : https://pic2.zhimg.com/v2-bf1...
Grande photo : https : // pic2.zhimg.com/v2-bf1...

  1. Considérez les nouveaux formats d'image, tels que le webp de Google. La compression avec perte est estimée à environ 30 % plus petite que le jpg, et la compression sans perte est estimée à environ 60 % plus petite que le jpg. Il existe également le dernier format TPG développé par Tencent. , que j'ai présenté ces deux derniers jours. Voler partout dans le ciel

.
巴扎黑

Suivez The Walking Dead The Walking Dead

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal