title: jquery remove attr then add attr
body: <p>I am working for some code with <a href="http://bxslider.com/" rel="nofollow">bxslider</a> because I have many large images, the page is loading slowly , I tried any <code>lazy loading plugin</code>, but not work well with <code>bxslider</code>. So finally, I tried to write some code by myself. </p>
  
  <p>I tried to do something, if the <code>div is visible</code>, <code>removeAttr data-style</code>, then add <code>addAttr style</code>. my code in <strong><a href="http://jsfiddle.net/qUEQp/" rel="nofollow">jsfiddle</a></strong> (Omitted code for <code>bxslider</code>):</p>
  
  
  
  <pre><code>&lt;div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;"&gt;&lt;/div&gt;
  &lt;div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fPalmFrond_ROW2095872384.jpg') no-repeat;background-position:0px 0px;"&gt;&lt;/div&gt;
  &lt;div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fJacksonSquare_ROW1364682631.jpg') no-repeat;background-position:0px 0px;"&gt;&lt;/div&gt;
  &lt;div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fAustraliaClouds_ROW1600390948.jpg') no-repeat;background-position:0px 0px;"&gt;&lt;/div&gt;​    
  </code></pre>
  
  
  
  <pre><code>$('.bgAnchor').each(function(){
      if($(this).is(":visible")){
          var data_style = $(this).attr('data-style');
          if(data_style!== 'undefined' &amp;&amp; data_style!== false){
              var attr_image = $(this).attr("data-style");
              $(this).css('background',attr_image).removeAttr("data-style");
          }
      }
  });​
  </code></pre>
  
  <p>but I am not sure why it is not work. I am pleasure if any one can help me. many thanks.</p>