{"id":629,"date":"2017-10-13T13:16:10","date_gmt":"2017-10-13T04:16:10","guid":{"rendered":"http:\/\/www.takaya-com.jp\/archives\/?p=629"},"modified":"2017-10-13T13:16:10","modified_gmt":"2017-10-13T04:16:10","slug":"%e6%ac%a1%e3%81%ae%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%80%e7%84%a1%e9%99%90%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab","status":"publish","type":"post","link":"https:\/\/takaya-com.jp\/archives\/2017\/10\/%e6%ac%a1%e3%81%ae%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e8%87%aa%e5%8b%95%e3%81%a7%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%80%e7%84%a1%e9%99%90%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab\/","title":{"rendered":"\u6b21\u306e\u30da\u30fc\u30b8\u3092\u81ea\u52d5\u3067\u8aad\u307f\u8fbc\u3080\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb"},"content":{"rendered":"<p><!-- \u672c\u6587 --><\/p>\n<p>\u6b21\u306e\u30da\u30fc\u30b8\u3092\u81ea\u52d5\u3067\u8aad\u307f\u8fbc\u3080<strong>\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb<\/strong>\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u7d39\u4ecb\u3067\u3059\u3002<br \/>\n<!--more--><\/p>\n<p>\u6b21\u306e\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u3092\u81ea\u52d5\u3067\u8aad\u307f\u8fbc\u3093\u3067\u51e6\u7406\u3092\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n<p>\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n<p>\u25bcJavaScript<\/p>\n<pre class=\"lang:js decode:true \" title=\"JavaScript\" >\r\n$(function() {\r\n    \/\/ \u4f7f\u7528\u3059\u308b\u8981\u7d20\u540d\r\n    var IScontentItems = '.list_item';\r\n    var IScontent = '.list';\r\n    var ISlink = '.page_next';\r\n    var ISlinkarea = '.page';\r\n    var loadingFlag = false;\r\n\r\n    $(window).on('load scroll', function() {\r\n\r\n        if(!loadingFlag) {\r\n            var winHeight = $(window).height();\r\n            var scrollPos = $(window).scrollTop();\r\n            var linkPos = $(ISlink).offset().top;\r\n \r\n            if(winHeight + scrollPos > linkPos) {\r\n                loadingFlag = true;\r\n \r\n                var nextPage = $(ISlink).attr('href');\r\n                $(ISlink).remove();\r\n\r\n                $.ajax({\r\n                    type: 'GET',\r\n                    url: nextPage,\r\n                    dataType: 'html'\r\n                }).done(function(data) {\r\n                    var nextLink = $(data).find(ISlink);\r\n                    var contentItems = $(data).find(IScontentItems);\r\n\r\n                    $(IScontent).append(contentItems);\r\n \r\n                    if(nextLink.length > 0) {\r\n                        $(ISlinkarea).append(nextLink);\r\n                        loadingFlag = false;\r\n                    }\r\n                }).fail(function () {\r\n                    alert('\u30da\u30fc\u30b8\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002');\r\n                });\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/pre>\n<p>\u25bcHTML<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"HTML\" >\r\n<!--1\u30da\u30fc\u30b8\u76ee-->\r\n<div class=\"contents\">\r\n    <ul class=\"list\">\r\n        <li class=\"list_item\">\r\n            <h1>1\u30da\u30fc\u30b8\u76ee<\/h1>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/01.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/02.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/03.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n                <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/04.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n                <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/05.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n    <\/ul>\r\n    <div class=\"page\">\r\n        <a class=\"page_next\" href=\"index2.html\">\u6b21\u3078<\/a>\r\n    <\/div>\r\n\r\n<!--2\u30da\u30fc\u30b8\u76ee-->\r\n<div class=\"contents\">\r\n    <ul class=\"list\">\r\n        <li class=\"list_item\">\r\n            <h1>\u3053\u3053\u304b\u30892\u30da\u30fc\u30b8\u76ee<\/h1>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/06.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/07.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/08.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/09.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/10.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n    <\/ul>\r\n \r\n    <div class=\"page\">\r\n        <a class=\"page_next\" href=\"index3.html\">\u6b21\u3078<\/a>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!--3\u30da\u30fc\u30b8\u76ee-->\r\n    <div class=\"contents\">\r\n    <ul class=\"list\">\r\n        <li class=\"list_item\">\r\n            <h1>\u3053\u3053\u304b\u30893\u30da\u30fc\u30b8\u76ee<\/h1>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/11.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/42.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n        <li class=\"list_item\">\r\n            <img decoding=\"async\" src=\"img\/50.jpg\" alt=\"\" \/>\r\n        <\/li>\r\n    <\/ul>\r\n<\/div>\r\n<\/pre>\n<p>\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001<br \/>\n\u300e<a href=\"http:\/\/cly7796.net\/wp\/javascript\/implement-infinite-scrolling\/\" target=\"_blank\">cly7796.net<\/a>\u300f\u3055\u3093\u3067\u3059\u3002<br \/>\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n<p>\u30c7\u30e2\u30da\u30fc\u30b8\u306f\u3001<a href=\"http:\/\/www.takaya-com.jp\/archives\/demo\/next_scroll\/\" target=\"_blank\">\u3053\u3061\u3089<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6b21\u306e\u30da\u30fc\u30b8\u3092\u81ea\u52d5\u3067\u8aad\u307f\u8fbc\u3080\u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u7d39\u4ecb\u3067\u3059\u3002<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/629"}],"collection":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":3,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/posts\/629\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takaya-com.jp\/archives\/wp-json\/wp\/v2\/tags?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}