1

我在这里浏览了很多帖子，包括这里

延迟加载不显示我的图像

但我仍然有问题，我不知道可能是什么原因，但根本没有显示 img。

这是我的代码 

<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>    
    <script>    
        function(){$("img.lazy").show().lazyload();}
    </script>        
</head> 


<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
<img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">

4

2 回答 2

1

在您调用layzyload插件的脚本中，您使用从未调用过的匿名函数包装它。如果您希望它在页面 HTML 加载后运行，您应该将它传递给jQuery

以下脚本

function(){$("img.lazy").show().lazyload();}

应该

$(function(){
    $("img.lazy").lazyload();
});

这是一个工作示例http://jsbin.com/uberoh/1/edit

另一个更简单的选择是将文档的<script>$("img.lazy").lazyload();</script>from移动到. 在这种情况下，脚本将在所有文件都已经在文档中之后执行，因此可以通过 jQuery 选择器访问headbody<img>$("img.lazy")

HTML

<body>
    ...
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    <img data-original="img/66_Rafael Ginatulin -white GREEN LIFE 001.jpg"  width="640" height="480" class="lazy">
    ...
    <script>$("img.lazy").lazyload();</script>
</body>

上面代码的工作示例见这里http://jsbin.com/uberoh/3/edit

于 2013-08-09T15:14:13.973 回答
0

如果您问我，避免使用插件并自己进行延迟加载会更容易。

您的图像应具有如下格式：

<img id="lazyimg123" src="loading.gif" data-img="http://bigimagehere.jpg" />

在某些事件触发后（滚动、单击等）更改图像属性：

var whichimage = "#lazyimg123"; // find some specific image
$("[id^=lazyimg]").attr({
    'src' : $(whichimage).data("img")
});

那应该让你开始。您只需更改图像属性，图像就会像魔术一样加载。

我在这里使用这种方法http://ProductInterest.com

于 2015-01-21T03:55:13.343 回答