Question

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

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和其他观点来看，最好的选择是什么？

Answer 1

选项C是速度和灵活性之间的权衡。第一张幻灯片可以在不等待任何脚本加载的情况下显示，但不会带来一次加载所有图像的开销，如选项B的情况。从带有选项A的SEO点隐藏所有数据来自不在脚本文件中搜索的搜索引擎。如果SEO是一个主要问题，请使用B或C.如果初始页面加载时间最重要，请选择A或C.

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

1 个答案: