2

私は自分のサイトに既にあるいくつかの機能を実装する jQuery プラグインを構築しようとしています (ただし、簡単に再利用できる方法で): ブラウザーの幅に基づいて画像の "src" 属性を変更します。

問題は、新しい画像をロードするときに、img 要素が一瞬高さと幅が 0 に折りたたまれてから、新しい高さにジャンプすることです。画像をプリロードするだけでも十分ではありません (プリダウンロードしてもロードに時間がかかるのは、サイズが大きいためだと思います)。

私はこれを行うことにしました：

  • 現在の src を CSS background-image 属性として設定します。
  • 画像のサイズを、現在背景になっているものと一致させます。
  • 次に、新しい 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 に答える