0

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.

4
  • data_style!== 'undefined' should be data_style !== undefined or typeof data_style!== 'undefined' if you like obnoxiously ugly code.
    – user1106925
    Feb 23, 2012 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, 2012 at 17:13
  • 1
    ...and your jsFiddle is loading MooTools instead of jQuery.
    – user1106925
    Feb 23, 2012 at 17:14
  • 1
    ...and if you're setting the entire style, then you should use .attr('style',attr_image)
    – user1106925
    Feb 23, 2012 at 17:16

4 Answers 4

1

.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");
        }
    }
});​
0
1

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.

2
  • 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, 2012 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. Feb 23, 2012 at 18:19
1

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.

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

4
  • thanks for a teach, btw, this also loading all the image when page loading, why is(":visible") not working?
    – Giberno
    Feb 23, 2012 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 how :visible selector working. Feb 23, 2012 at 17:52
  • @Giberno, and look at the first div which has a display value of none in this updated jsFiddle, you can see that is(":visible") is working. Feb 23, 2012 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, 2012 at 18:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.