javascript - jquery第一次懒加载报错

Question

我的 AJAX 请求

$.ajax({
    type: "POST",
    data: "{'id':'" + id + "'}",
    contentType: "application/json; charset=UTF-8",
    dataType: "json",
    url: "../WebService.asmx/getallimages",
    success: function (data) {
        //getting image srcs here
        for (var i = 0; i < s; i++) {
            counter_xyz++;
            if(counter_xyz<10) {
                $("#holding_img_" + variable[i]).attr("src", variable[i].src);
            } else {
                $("#holding_img_" + variable[i]).attr("data-orig", variable[i].src);
            }
        }
        $("img.lazy").show().lazyload({
            data_attribute: "orig"                 
        }); 
    }
    error : function (data) {

    }
});

使用过 tuupola..jquery_lazyload 插件 .. 它工作正常，但是当用户第一次打开站点时 .. 它没有被应用当所有缓存被清除时，延迟加载不起作用。从某种意义上说，未滚动的部分图像也被加载并且可见..

我没有得到如何解决这个错误..

注意-仅第一次发生这种情况..

score 2 · Accepted Answer

我看到你正在谈论的问题......没有深入调查以了解它发生的原因 - 但这是解决方案：在不使用浏览器缓存的情况下加载脚本（JQuery和LazyLoad），通过将它们注入页面使用“loadScript”功能：

在 FF 32.0.3 下测试（Chrome 中的原始问题 - 由于lazyLoad 脚本中严格的 MIME 类型策略）

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JQUERY LazyLoad</title>
</head>

<body>
    <img id="holding_img_1" class="lazy"/>
    <img id="holding_img_2" class="lazy"/>
    <img id="holding_img_3" class="lazy"/>
    <img id="holding_img_4" class="lazy"/>
    <img id="holding_img_5" class="lazy"/>
    <img id="holding_img_6" class="lazy"/>
    <img id="holding_img_7" class="lazy"/>
    <img id="holding_img_8" class="lazy"/>
    <img id="holding_img_9" class="lazy"/>
    <img id="holding_img_10" class="lazy"/>
    <img id="holding_img_11" class="lazy"/>
    <img id="holding_img_12" class="lazy"/>
    <img id="holding_img_13" class="lazy"/>
    <img id="holding_img_14" class="lazy"/>
    <img id="holding_img_15" class="lazy"/>
    <script>
        "use strict";
            function callback(data) {
                alert(data);
            }
            function loadScript(scriptSrc, jqueryLoaded) {
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.async = false;
                script.onload = function(){
                    if (jqueryLoaded) {
                        $.ajax({
                            type: "POST",
                            //data: "{'id':'" + id + "'}",
                            contentType: "application/javascript; charset=UTF-8",
                            dataType: "jsonp",
                            url: "http://localhost:8080/images/?callback=callback",
                            success: function (data) {
                                console.log(data);
                                //getting image srcs here
                                for (var i = 0; i < data.length; i++) {
                                    //counter_xyz++;
                                    //console.log(i);
                                    if(i<10) {
                                        $("#holding_img_" + i).attr("src", "http://localhost:8080/image/"+(i+1)+".jpg");
                                    } else {
                                        $("#holding_img_" + i).attr("data-orig","http://localhost:8080/image/"+(i+1)+".jpg");
                                    }
                                }
                                $("img.lazy").show().lazyload({
                                    data_attribute: "orig"                 
                                }); 
                            },
                            error : function (data) {

                            }
                        });  
                    }
                    else {
                        loadScript("https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js", true);                    
                    }

                };
                script.src = scriptSrc;
                document.getElementsByTagName('head')[0].appendChild(script);           
            };
            loadScript("http://code.jquery.com/jquery-1.11.1.min.js");
    </script>
</body>
</html>

score 2 · Accepted Answer

2

我猜成功回调后缺少逗号。你能检查一下吗？

于 2014-10-17T12:41:24.833 回答

score 0 · Accepted Answer

确保将代码保存在里面

$(document).ready(function(){});

这可能会有所帮助！

$(document).ready(function() 
{

//Your ajax call..

});

javascript - jquery第一次懒加载报错

3 回答 3

Related

Reference