介绍jQuery在风格上的变化

introducig changes in style by jQuery

本文关键字：变化 风格 jQuery 介绍      更新时间：2023-09-26

我创建了一个简单的代码，应该根据窗口宽度设置/更改图像背景

var backgroundBig = "url(../img/logo1.svg)";
var backgroundSmall = "url(../img/logo2.svg)";
function logoBG(){
    var windowWidth = $(window).width();
    if (windowWidth < 700){
        $("#wrapper1").css({"background-image": backgroundSmall});
    } else {
        $("#wrapper1").css({"background-image": backgroundBig});
    };
};
logoBG();
$(window).resize(logoBG);

就这么简单。。。在css文件中设置可选的背景图像属性

#wrapper1{
background-repeat: no-repeat;
background-size: cover;}

网站代码中的一切都很好-当我通过firebug跟踪更改时，代码会按原样更改。然而，图像不会加载，网站显示没有任何变化。那是怎么回事？

提前感谢PM

试试这个https://jsfiddle.net/2Lzo9vfc/23/

JS

var backgroundBig = "url(http://placehold.it/1980x960)";
var backgroundSmall = "url(http://placehold.it/1980x960/000000)";
function logoBG(){
    var windowWidth = $(window).width();
    if (windowWidth <= 700){
        $("#wrapper1").css("background-image", backgroundSmall);
    } else {
        $("#wrapper1").css("background-image", backgroundBig);
    };
};
logoBG();
$(window).resize(logoBG);
$(document).ready(logoBG);

HTML

<div id="wrapper1">Lorem</div>

因为必须首先加载图像，为什么要使用firebug？这肯定是因为firebug重新加载了DOM，这样他就可以解析它，当他这样做的时候，图像就已经加载了。

我可以推荐你jquery.waitForImages，因为它甚至可以等待图像背景，所以在加载图像之前不会执行JavaScript代码，也不需要重新加载DOM。

感谢您的建议。我的代码有问题。。。我的图像文件的路径。

url(../img/logo1.svg)

在css文件中工作，这就是为什么我认为它一定是正确的，但

url(img/logobg.svg)

应该由jQuery脚本插入。多么愚蠢的错误：）

相关文章：