我的图片不是使用惰性加载显示的

my picture are not displayed using lazy load

本文关键字：加载 显示 我的      更新时间：2023-09-26

我浏览了这里的许多帖子，包括这里的

懒惰加载不显示我的图像

但我仍然有问题，我不知道可能是什么原因，但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">

在调用layzyload插件的脚本中，您用从未调用过的匿名函数封装了它。如果你想让它在页面HTML加载后运行，你应该把它传递给jQuery

以下脚本

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

应该是

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

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

另一个更简单的选项是将<script>$("img.lazy").lazyload();</script>从文档的head移动到body的末尾。在这种情况下，脚本将在所有<img>都已在domocument中并因此可由jQuery选择器$("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

如果你问我，避免使用插件并自己进行懒惰加载会更容易。

你的图像应该有这样的格式：

<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

相关文章：