在js对象和li元素中存储幻灯片的横幅滑块

Banner slider storing slides in js object vs li elements

本文关键字：幻灯片 存储 对象 js li 元素      更新时间：2023-09-26

我正在开发一个简单的横幅滑块。我有三个选项来存储幻灯片元素:

a)我可以在javascript对象中存储横幅幻灯片，然后使用jquery创建幻灯片li元素。

bannerSlides = {
  "1":{
    "bannerId":"1",
    "title":"Some title 1",
    "content":"<p><h2>Some title 1<'/h2><img src='"http:'/'/www.domain.com'/media'/wysiwyg'/Sea.jpg'" alt='"'" '/><'/p>",
    "anotherparameter":"paramvalue",
    "anotherparameter2":"paramvalue"
  },
  "2":{
    "bannerId":"2",
    "title":"Some title 2",
    "content":"<p><h2>Some title 2<'/h2><img src='"http:'/'/www.domain.com'/media'/wysiwyg'/Sun.jpg'" alt='"'" '/><'/p>",
    "anotherparameter":"paramvalue",
    "anotherparameter2":"paramvalue"
  },
  "3":{
    "bannerId":"3",
    "title":"Some title 3",
    "content":"<p><h2>Some title 3<'/h2><img src='"http:'/'/www.domain.com'/media'/wysiwyg'/Summer.jpg'" alt='"'" '/><'/p>",
    "anotherparameter":"paramvalue",
    "anotherparameter2":"paramvalue"
  }  
};
b)我可以像这样将横幅幻灯片直接显示为ul中的列表元素: 
<div style="overflow:hidden;">
  <ul style="width: 300%; position: relative; left: -100%; height: 350px;">
    <li style="width: 33.3333%;">Slide 1</li>
    <li style="width: 33.3333%;">Slide 2</li>
    <li style="width: 33.3333%;">Slide 3</li>
  </ul>
</div>

c)只显示第一张幻灯片直接作为li元素立即显示，其余的li元素注入javascript。

我检查了亚马逊网站，我可以看到他们使用c)选项。我不确定为什么a)不行。从SEO和其他角度来看，什么选择是最好的?

选项C是速度和灵活性之间的折衷。第一张幻灯片可以在不等待任何脚本加载的情况下显示，但不会像选项b那样带来一次加载所有图像的开销。从SEO的角度来看，选项a隐藏了搜索引擎的所有数据，而搜索引擎不会在脚本文件中搜索。如果最重要的是初始页面加载时间，那就选a或c。

相关文章：