Ошибка отложенной загрузки в первый раз jquery

МОЙ 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.. Он работает нормально, но в первый раз, когда пользователь открывает сайт.. не применяется. Ленивая загрузка не работает, когда очищается весь кеш. Не работают в том смысле, что изображения с некроллированной частью также загружаются и видны.

Я не понимаю, как решить эту ошибку..

Примечание - только в первый раз это происходит..

Источник

3 ответа

Я думаю, запятая отсутствует после успешного обратного вызова. Можете ли вы проверить это.

Источник

Я видел проблему, о которой вы говорите... недостаточно глубоко изучил, чтобы понять, почему это происходит, но вот решение: загрузите скрипты (JQuery и LazyLoad) без использования кэша браузера, через via, внедрив их в страницу используя функцию "loadScript":

Протестировано в FF 32.0.3 (оригинальная проблема в Chrome - из-за строгой политики типов MIME в сценарии lazyLoad)

<!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>
Источник

Убедитесь, что вы держите свой код внутри

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

Это может помочь!

$(document).ready(function() 
{

//Your ajax call..

});
Источник
Другие вопросы по тегам