jquery remove attr then add attr

Question

I am working for some code with bxslider because I have many large images, the page is loading slowly , I tried any lazy loading plugin, but not work well with bxslider. So finally, I tried to write some code by myself.

I tried to do something, if the div is visible, removeAttr data-style, then add addAttr style. my code in jsfiddle (Omitted code for bxslider):

<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fPalmFrond_ROW2095872384.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fJacksonSquare_ROW1364682631.jpg') no-repeat;background-position:0px 0px;"></div>
<div class="bgAnchor" data-style="background:url('http://it.bing.com/az/hprichbg?p=rb%2fAustraliaClouds_ROW1600390948.jpg') no-repeat;background-position:0px 0px;"></div>

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(data_style!== 'undefined' && data_style!== false){
            var attr_image = $(this).attr("data-style");
            $(this).css('background',attr_image).removeAttr("data-style");
        }
    }
});

but I am not sure why it is not work. I am pleasure if any one can help me. many thanks.

`data_style!== 'undefined'` should be `data_style !== undefined` or `typeof data_style!== 'undefined'` if you like obnoxiously ugly code. — , Feb 23 '12 at 17:12
If you're running that code at $(document).ready() it's probably not triggering until the document is finished loading all the way. — Dave, Feb 23 '12 at 17:13
...and your jsFiddle is loading `MooTools` instead of `jQuery`. — , Feb 23 '12 at 17:14
...and if you're setting the entire style, then you should use `.attr('style',attr_image)` — , Feb 23 '12 at 17:16

score 1 · Answer 1 · answered Feb 23 '12 at 17:15

.css() only works for one property at a time, you've got 3, try using the style attribute; Undefined isn't a string, it's a built-in variable; and you don't need to get the data_style twice.

Try this:

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(data_style!== undefined && data_style!== false){
            $(this).attr('style',data_style).removeAttr("data-style");
        }
    }
});

score 1 · Answer 2 · edited May 23 '17 at 09:59

There's two things going on:

1) You should be checking for it being undefined using the typeof function in javascript, like so:

$('.bgAnchor').each(function(){
    if($(this).is(":visible")){
        var data_style = $(this).attr('data-style');
        if(typeof data_style!== 'undefined' && data_style!== false){                   
            var attr_image = $(this).attr("data-style");
            alert(attr_image);
            $(this).css('background', attr_image).removeAttr("data-style");
        }
    }
});

(for a good explanation of why, see this answer about typeof

2) You're trying to pass too much into the "background" style with the $(this).css('background', attr_image) call. So, you need to alter you data-style attribute as follows:

<div class="bgAnchor" data-style="url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat"></div>

If you want to set background-position, etc, you can either do that in your css for ALL .bgAnchor elements, OR you can add a new data-style for background-position, but you can't cram both background-position and background into the background css property.

take of your advice, update my code `http://jsfiddle.net/qUEQp/10/` why still loading all the images when open the page? why `is(":visible")` not working? thanks. — Giberno, Feb 23 '12 at 17:51
In the jsfiddle example you sent, the div's are visible due to display: block; - if you want them to be not visible, set them to display: none, then the jQuery is(":visible") will do what you want. — random_user_name, Feb 23 '12 at 18:19

bfavaretto · Answer 3 · 2012-02-23T18:13:58.343

The problem is here:

$(this).css('background',attr_image)

Your var attr_image (which BTW you don't need, it's identical to data_style) is the following string (for 1st div):

background:url('http://it.bing.com/az/hprichbg?p=rb%2fNewRiverGorgeBridge_ROW468427072.jpg') no-repeat;background-position:0px 0px;

The easiest solution is to use this:

this.style = attr_image;

The other solution is to put your style properties into separate data- attributes, one for background, another one for background-repeat, and yet another one for background-position. In this case, your data- attributes should contain only the values, not the CSS property names.

score 0 · Accepted Answer · answered Feb 23 '12 at 17:24

0

from jQuery css() page

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
For example, if you want to retrieve the rendered margin, 
use: $(elem).css('marginTop') 
and $(elem).css('marginRight'), and so on.

this means that you can't use background in css()

so you have to do it with style attribute.

 $(this).attr('style',attr_image);

here is jsFiddle page

answered Feb 23 '12 at 17:24

Okan Kocyigit

12,633
18
64
119

thanks for a teach, btw, this also loading all the image when page loading, why `is(":visible")` not working? – Giberno Feb 23 '12 at 17:43
1

@Giberno, because all divs are visible, there is no properties to make them nonvisible in your jsFiddle example. They **don't** have a CSS _display_ value of _none_ and their _width_ and _height_ are **not** explicitly set to **0**, so all divs are visible, you can look [here](http://api.jquery.com/visible-selector/) how :visible selector working. – Okan Kocyigit Feb 23 '12 at 17:52
@Giberno, and look at the first div which has a display value of none in [this updated jsFiddle](http://jsfiddle.net/qUEQp/11/), you can see that is(":visible") is working. – Okan Kocyigit Feb 23 '12 at 17:59
sorry, my mind is a bit confusion, my purpose is when the image enter the screen visible area, `replace` the `attr`, may be should use `div position` to make this judge. – Giberno Feb 23 '12 at 18:05

jquery remove attr then add attr

4 Answers4