0

我正在尝试实现一种称为延迟加载的 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>
4

3 回答 3

12

您没有正确使用该插件。阅读文档，您应该将图像的 URL 放在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属性中找到真正的 URL。它默认为data-original，上面的选项将其更改data-orig为匹配我给你的错误 HTML。

小提琴

于 2013-06-01T03:19:17.900 回答
2

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

$(function() {
    $("img.lazy").lazyload();
});
于 2013-06-01T03:13:41.237 回答
1

将您的脚本放在 document.ready 下。这样您$("img.lazy")就可以在加载文档后并且仅当图像标签在 DOM 中可用时执行。

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

$("img.lazy").lazyload();最简单的方法是在ie之前放置一个 alert 或 console.log

<script>
console.log($("img.lazy").length); // this will log 0
 $("img.lazy").lazyload();
 </script>
于 2013-06-01T03:13:44.740 回答