2

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

问题是在加载新图片的时候，img元素瞬间塌陷到0高宽，然后又跳到新的高度。即使预加载图像是不够的（我认为这是因为巨大的尺寸使得即使在预下载之后也需要时间加载）。

我决定这样做：

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

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

问题是大小可以用不同的方式定义，例如：

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

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

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

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

4

2 回答 2

1

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

  1. 存储以前的内联设置。到目前为止，最简单的方法就是存储element.style.cssText；
  2. 然后设置你的冻结值；
  3. 然后恢复以前的设置（再次，通过设置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()调用中，它会完全停止工作。

于 2013-08-16T23:49:03.587 回答
1

只需使用内联样式。它覆盖所有其他样式属性。您可以使用!important良好的措施。

演示

于 2013-08-16T23:17:59.850 回答