Question

MY AJAX REQUEST

$.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插件.. 它工作正常，但第一次用户打开网站..它没有得到应用清除所有缓存后，延迟加载不起作用。在某种意义上不起作用的是未打开的零件图像也被加载并且可见..

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

注意 - 只有第一次出现这种情况..

Answer 1

我猜成功回调后缺少逗号。你可以检查一下。

Answer 2

我看到你正在谈论的问题...没有深入调查以了解它为什么会发生 - 但这里是解决方案：加载脚本（JQuery和LazyLoad）使用浏览器缓存，via使用“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>

Answer 3

确保将代码保留在

中

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

这可能会有所帮助！

$(document).ready(function() 
{

//Your ajax call..

});

第一次jquery的Lazy Load错误

3 个答案: