Question

背景信息：由于发布截止日期，我正在Phases开发公司网站。第一阶段是开发网站的前端和“硬编码”所有内容。第二阶段，发布后，是将开发的网站集成到CMS后端wordpress中，以处理当前和未来的内容。

情况：在第1阶段开发期间，我在页面上开发了一个Team Carousel部分。这个旋转木马将容纳约35名个人员工头像/图像。

预期行为：如果可能，我想利用jQuery动态构建和添加这些单独的员工图像，并将其附加到.carousel-item div。而不是将其硬编码到HTML中。

我的担忧： HTML中的单个图像的硬编码会影响性能，速度和优化，导致网站变得臃肿，最终导致服务器请求过多。

理论：利用jQuery会对速度和优化产生积极影响，因为它允许页面首先构建HTML结构和内容，然后是CSS，最后是JS。

我已经利用这个函数在全屏部分/ div上动态加载background-imgs，而不是在HTML中创建单独的类或内联样式

// Dynamic BG Images
$('.bg-img').each(function() {
    var page = $(this).attr('data-page');
    var section = $(this).attr('data-section');
    var style = {
        'background': 'url(assets/bg-imgs/' + page + '-' + section + '.jpg) center right no-repeat',
        'background-size': 'cover'
    }

    // Runs BG IMG Function
    $(this).css(style);
});

//Example utilization of function in HTML
<div data-page="careers" data-section="about" class="bg-img">
  <div class="row>">
    <div">
      <h3>In Synch</h3>
      <p><!--content--></p>
    </div>
  </div>
</div>

问题：

可以使用相同的方法或类似方法用于“动态图像” 人口，或者甚至可以在这种情况下使用jQuery？
可以在不使用数据库的情况下从目录动态添加图像，比如站点根./assets/headshots中的目录等吗？
在这种情况下，使用jQuery可以更好地提高速度和优化，直接将图像硬编码到HTML结构中。
我是否需要使用服务器端语言才能完成此任务？

在进行全面开发之前，我一直在寻找一些见解。

Answer 1

是。您可以动态创建图像标记，如下所示：

$("<img/>").attr("src", url).wrap("<p/>").appendTo(".row > div > div");
Javascript无法从目录中读取文件，除非您告诉它如何操作。您将需要硬编码图像的数量并以逻辑方式加载它们，或者您需要一种方法将图像名称传递给Javascript。
JQuery较慢，因为在呈现页面之前它不会开始加载图像。我个人不会推荐它，但许多组织认为权衡是值得的。
可能。我认为这与问题2相同。您的方法会有所不同，但我会建议这样的事情：

<input type="hidden" id="myImageNames" value="image1.ext|image2.ext|..." />

PS。背景图像通常不符合可访问性。请参阅http://www.ssbbartgroup.com/blog/css-background-images-and-accessibility/。

Jquery：动态加载图像集

1 个答案: