Question

我正在尝试实现一种名为延迟加载的jQuery技术。我想要实现的目标是我希望加载页面而不等待所有图像请求，因此，我希望页面首先加载CSS等，并让图像加载缓慢。

我面临的问题是，它在页面加载之前等待所有图像请求，这与延迟加载的概念相反。有人能帮助我吗？

<html>
    <head>
        <link rel="stylesheet" href="css/float.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
        <script>
            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    $(function(){
                        $("img.lazy").lazyload();
                    });
                });
            </script>
    </head>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8199/8219175940_effa3f66ca_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8490/8215600456_de252d155d_m.jpg" width="400" height ="400"/>
<br>

Answer 1

您没有正确使用该插件。阅读documentation，您应该将图片的网址放在data-original属性中。 src属性应包含虚拟图像的URL，该图像用于所有项目，直到加载实际图像为止。

<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>

另外，正如其他答案所指出的那样，你需要从文档就绪处理程序中调用插件。

jQuery(document).ready(function ($) {
    $("img.lazy").lazyload(
        { data_attribute: "orig" 
        });
});

data_attribute选项告诉插件找到真实网址的data-XXX属性。默认为data-original，上面的选项将其更改为data-orig以匹配我给你错误的HTML。

FIDDLE

Answer 2

将脚本包装在onload函数中，以便在加载页面之前它不会执行。

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

Answer 3

将您的脚本放在document.ready下。因此，在加载文档后以及在DOM中提供图像标记时，$("img.lazy")将被执行。

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

最简单的方法是在$("img.lazy").lazyload();之前发出警报或console.log，即

<script>
console.log($("img.lazy").length); // this will log 0
 $("img.lazy").lazyload();
 </script>

Jquery Lazy正在加载不正常

3 个答案: