-5

私の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 プラグインを使用しました。正常に動作しますが、ユーザーが初めてサイトを開いたときは..適用されません すべてのキャッシュがクリアされると、遅延ロードが機能しません。スクロールされていない部分の画像も読み込まれて表示されるという意味では機能しません..

このエラーを解決する方法がわかりません..

注 - これが発生するのは初めてです..

4

3 に答える 3

2

あなたが話している問題を見ました...なぜそれが起こるのかを理解するのに十分なほど深く調査しませんでした-しかし、ここに解決策があります:ブラウザキャッシュを使用せずにスクリプト(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>
于 2014-10-21T06:09:32.663 に答える
2

成功のコールバックの後にコンマが欠落していると思います。それを確認していただけますか。

于 2014-10-17T12:41:24.833 に答える
0

コードを内部に保持していることを確認してください

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

これは役立つかもしれません！

$(document).ready(function() 
{

//Your ajax call..

});
于 2014-10-20T10:52:08.800 に答える