JQuery/CSS - 基于值的不同 <body> 背景图像，无需在 _Layout 页面上的 document.ready() 中加载
Posted
技术标签:
【中文标题】JQuery/CSS - 基于值的不同 <body> 背景图像，无需在 _Layout 页面上的 document.ready() 中加载【英文标题】：JQuery/CSS - Different <body> background images based on value, without loading in document.ready() on _Layout page 【发布时间】：2021-06-19 06:28:49 【问题描述】：我有一个供多个部门使用的 C# MVC Web 应用程序。我决定从繁重的事情中休息一下，并用一些更悠闲的东西来解决问题。当用户访问该站点时，我会检查我们的数据库以获取他们的信息，其中之一是我存储在 Session["DeptId"] 变量中的部门 ID。
我能够根据这个 Session["DeptId"] 值更改背景图像，但我目前正在 $(document).ready() 函数中的共享“_Layout.cshtml”页面中进行更改这导致背景在页面出现后稍微加载，导致每次页面加载时都会闪烁。当然，如果我只是将 body 中的背景设置为我的 css 页面中的单个图像，则不会发生这种闪烁。有没有办法在文件准备好之前让它工作以避免轻微的延迟？
_Layout.cshtml jQuery：
$(document).ready(function ()
if (@Convert.ToInt32(Session["DeptId"]) == 3)
$('body').addClass("husky");
else
$('body').addClass("stopLight");
);
CSS 类：
.stopLight
background-image: url("Images/StopLightBackground.jpg");
background-size: 100%;
.husky
background-image: url("Images/HuskyBackground.jpg");
background-size: 100%;
【问题讨论】：
【参考方案1】：是的，当然，您可以直接在 _Layout.cshtml 的正文标签中执行此操作，例如：
<body class="@(Session["DeptId"] == "3" ? "husky" : "stopLight")">
</body>
【讨论】：
感谢您的建议，总是很高兴看到如何解决同一问题的不同看法。就性能而言，它的行为似乎相似。页面仍然加载，然后一秒钟后图像出现。它可以忽略不计，我可能会无缘无故地担心它。顺便说一句，您有语法错误，第二个？必须是：，我试图编辑它，但它正在接受同行评审。 :) 您不妨选择Session["DeptId"]) == "3" 而不必担心 ToInt32 - 您不在乎它是否 不是 3，但 ToInt32 会 i> 关心它是否不是数字。
这将是最快的方法，并且完全与直接在 .cshtml 中直接写入 <body class=... 相同。延迟将在其他地方造成。可能是您的图像太大，因此需要时间下载（并缓存关闭）。或者可能是您的<link rel= css 位于页面底部，而不是位于<head> 中。唯一更快的方法是使用<body style='background-image:url("@(... ? "Images/StopLightBackground.jpg" : ."...")'>，这样它就不会在css上等待。以上是关于JQuery/CSS - 基于值的不同 <body> 背景图像，无需在 _Layout 页面上的 document.ready() 中加载的主要内容，如果未能解决你的问题，请参考以下文章