jQuery LazyLoad images in a hidden div

Question

I have a bunch of images that are in a hidden div. The div is shown when the user clicks on some links.

I'd like to jQuery lazyload to hide these images until the link is clicked and the hidden div is exposed. But, if I use lazyload according to the documentation, the images are always loaded as the hidden div is in the viewport, presumably.

any ideas?

Solution 1

Timo I think he doesn't want anyway that loads images in the dom before he needs them. Somehow this is a classic scenario of using ajax to load content.

I propose that you go about it like this

$.fn.image = function(src, f) {

        return this.each(function() {

            var i = new Image();

            i.src = src;

            i.onload = f;

            this.appendChild(i);

        });
    }

    $(function() {


        $('yourlink').click(function() {

            $("#container").image("image.jpg", function() {

                alert("image loaded");

            });
        });

    });

Solution 2

Do you really need the lazy load plugin? How about replacing the div content with the image(s) when you click the link?

Something like:

<a href="link" onclick="show_images('div_id');">asdf</a>

and

function show_images(id) { 
    $('#' + id).append('<img src="image1.jpg" /><img src="imagex.jpg" />'); 
}

Solution 3

I wrote a jQuery plugin that uses html comments to load both images and any arbitrary html inside a comment block.

Here's the article/docs: http://bit.ly/eXxK1c

Here's the plugin page: http://plugins.jquery.com/project/LazyLoadOnScroll

It works like this:

<pre class=”i-am-lazy” ><!– 
    <img src=”some.png” /> 
–></pre>

<pre class=”i-am-lazy” ><!– 
    <div>Whatever html you want lazy loaded</div> 
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >

$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});

</script> 

When the pre tags become visible in the browser viewport the placeholder tags are replaced with the html string inside the comment. You can use any kind of tag as the placeholder, not just pre, but I like pre because it renders as 0 dimension when there's a comment inside.

Solution 4

You can try this solution as well. As first give image proper data-swap attribute with your image to url

<div id="imgcontainer">
    <img data-swap="url/to/your/image1.jpg" class="swapimg" alt="image name">
    <img data-swap="url/to/your/image2.jpg" class="swapimg" alt="image name">
    <img data-swap="url/to/your/image3.jpg" class="swapimg" alt="image name">
</div>

and then use jquery to swap attribute data-swap to src and what is realy important - check if this image was not shown before using if statement. Just for performance :)

var imgs = $('.swapimg');

$("#imgcontainer").click(function () {
    if (imgs.attr("src") != imgs.attr("data-swap")) {
        imgs.each(function () {
            $(this).attr('src', $(this).attr("data-swap"));
        });
    }
});

View more solutions

Comments

[Timo Albert]

Thing is... I don't have 50 points to leave a comment. Also the second question in question is an alternative solution to the problem which I detailed a bit more in my edit.

[Jim Schubert]

+1 Timo. This is a simple solution and shouldn't be a comment as it answers the question. This works in Google Chrome, but I don't know if it would dynamically load images like this in other browsers.

[Josh K]

Now it answers the question. Previously it was a comment. If you don't have the rep to leave a comment then don't provide a comment under the guise of an answer.

[Jim Schubert]

@Josh K: I see what you mean. It's pretty tough posting comments as answers until 50 rep.

[Timo Albert]

I know beforehand that I shouldn't keep this up, but I would say the two unedited questions do answer the "any ideas?" question (albeit with too little detail). Anyway I'm new here so fire away ;) My apologies for any inconvenience.