jQuery LazyLoad图像隐藏在div中

时间:2010-04-18 15:06:06

标签: jquery lazy-loading

我有一堆隐藏的div中的图像。当用户点击某些链接时会显示div。

我想jQuery lazyload隐藏这些图像,直到单击链接并显示隐藏的div。但是,如果我根据文档使用lazyload,那么图像总是被加载,因为隐藏的div在视口中,大概是。

任何想法?

4 个答案:

答案 0 :(得分:3)

你真的需要延迟加载插件吗?单击链接时如何用图像替换div内容?

类似的东西:

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

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

答案 1 :(得分:2)

我写了一个jQuery插件,它使用html注释来加载注释块中的图像和任意html。

以下是文章/文档:http://bit.ly/eXxK1c

以下是插件页面:http://plugins.jquery.com/project/LazyLoadOnScroll

它的工作原理如下:

<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> 

当预标签在浏览器视口中可见时,占位符标记将替换为注释中的html字符串。您可以使用任何类型的标记作为占位符,而不仅仅是pre,但我喜欢pre,因为当内部有注释时它会呈现为0维。

答案 2 :(得分:1)

您也可以尝试此解决方案。首先将图像正确的数据交换属性与您的图像一起提供给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>

然后使用jquery将属性数据交换交换为 src 以及真正重要的内容 - 检查在使用if语句之前是否未显示此图像。仅仅为了表现:)

var imgs = $('.swapimg');

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

答案 3 :(得分:0)

Timo我认为他不想在他需要之前在dom中加载图像。不知何故,这是使用ajax加载内容的经典场景。

我建议你这样做

$.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");

            });
        });

    });