Question

我正在尝试构建一个jQuery插件，它实现了我网站中已有的一些功能（但是以一种易于重用的方式）：根据浏览器的宽度更改图像的“src”属性。

问题是，在加载新图像时，img元素会暂时折叠到0高度和宽度，然后跳转到新高度。即使预加载图像也是不够的（我认为这是因为巨大的尺寸使得即使在预先下载后也需要加载时间。）

我决定这样做：

将当前src设置为CSS background-image attibute。
强制图像的大小与现在背景的大小相匹配。
然后设置新的src。
当新的src加载时，恢复强制大小以允许新的src（或之前程序员使用的任何其他规则或属性）再次定义它。

我不想弄乱用户（用户指的是程序员使用我的库）CSS规则和HTML属性。

问题在于尺寸可以用不同的方式定义，例如：

使用<img width="xx" height="yy">
使用CSS：img { width: xx, height: yy }
让加载的文件强加它自己的维度

所以，我正在寻找的行为是：

程序员以任何他想要的方式定义img维度
我的插件会在src更改期间暂时强制冻结这些尺寸
当它解冻它们时，尺寸再次由程序员原始规则确定

问题是：如何以恢复先前规则的方式取消设置强制尺寸，即使它只是图像文件中的规则？

Answer 1

只需使用内联样式。它会覆盖所有其他样式属性。您可以使用!important作为衡量标准。

demo

Answer 2

使用!important内联样式覆盖其他所有内容的事实。所以，你的算法应该：

存储以前的内联设置。到目前为止最简单的方法就是存储element.style.cssText;
然后设置你的冻结值;
然后恢复以前的设置（再次，通过设置element.style.cssText）。

=== （编辑所以我可以在代码中添加解决方案并接受答案）

好的，我做了你说的，它工作得很好：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div>
<img id="myimg" src="http://i.imgur.com/8eos7vW.jpg" height="200" style="height:300px;"/>
<img id="myimg2" src="http://i.imgur.com/8eos7vW.jpg" height="200"/>
<img id="myimg3" src="http://i.imgur.com/8eos7vW.jpg"/>
</div>

<script>
$('div').append("<BR>element height: " + document.getElementById('myimg').height + "px");
top.backupcss = document.getElementById('myimg').style.cssText;
top.backupcss2 = document.getElementById('myimg2').style.cssText;
top.backupcss3 = document.getElementById('myimg3').style.cssText;
$('div').append("<BR>element.style.cssText: " + top.backupcss);
$('div').append("<BR>element.style.cssText (2): " + top.backupcss2);
$('div').append("<BR>element.style.cssText (3): " + top.backupcss3);
$("#myimg").css({"width": "10px", "height": "10px"});
$("#myimg2").css({"width": "10px", "height": "10px"});
$("#myimg3").css({"width": "10px", "height": "10px"});
setTimeout(function(){
    document.getElementById('myimg').style.cssText = top.backupcss;
    document.getElementById('myimg2').style.cssText = top.backupcss2;
    document.getElementById('myimg3').style.cssText = top.backupcss3;
},10000);
</script>

！important位不起作用：如果我将!important添加到.css()来电，则会完全停止工作。

找出影响IMG大小的当前CSS规则和HTML属性

2 个答案:

demo