我有一堆隐藏的div中的图像。当用户点击某些链接时会显示div。
我想jQuery lazyload隐藏这些图像,直到单击链接并显示隐藏的div。但是,如果我根据文档使用lazyload,那么图像总是被加载,因为隐藏的div在视口中,大概是。
任何想法?
答案 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");
});
});
});