use requestAnimationFrame for window scroll event
Showing
12 changed files
with
61 additions
and
17 deletions
@@ -45,7 +45,7 @@ $fixTitleBar.css({ | @@ -45,7 +45,7 @@ $fixTitleBar.css({ | ||
45 | minBrandListTop = brandSwipe + $('.hot-brand').outerHeight() + $('.banner-top').outerHeight(); | 45 | minBrandListTop = brandSwipe + $('.hot-brand').outerHeight() + $('.banner-top').outerHeight(); |
46 | $brandList.last().append($fixTitleBar); | 46 | $brandList.last().append($fixTitleBar); |
47 | 47 | ||
48 | -$(window).scroll(function() { | 48 | +function scrollHandler() { |
49 | var scrTop = $(window).scrollTop(); | 49 | var scrTop = $(window).scrollTop(); |
50 | 50 | ||
51 | if ($brandList.eq(0).offset().top < minBrandListTop) { | 51 | if ($brandList.eq(0).offset().top < minBrandListTop) { |
@@ -62,6 +62,10 @@ $(window).scroll(function() { | @@ -62,6 +62,10 @@ $(window).scroll(function() { | ||
62 | } | 62 | } |
63 | 63 | ||
64 | }); | 64 | }); |
65 | +} | ||
66 | + | ||
67 | +$(window).scroll(function() { | ||
68 | + window.requestAnimationFrame(scrollHandler); | ||
65 | }); | 69 | }); |
66 | 70 | ||
67 | function changeBackground() { | 71 | function changeBackground() { |
@@ -107,12 +107,16 @@ $nav.on('touchend touchcancel', function(e) { | @@ -107,12 +107,16 @@ $nav.on('touchend touchcancel', function(e) { | ||
107 | } | 107 | } |
108 | }); | 108 | }); |
109 | 109 | ||
110 | -$(document).scroll(function() { | 110 | +function scrollHandler() { |
111 | var $c = $infos.not('.hide'); | 111 | var $c = $infos.not('.hide'); |
112 | 112 | ||
113 | if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $c.height()) { | 113 | if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $c.height()) { |
114 | loadMore($c, state[curType]); | 114 | loadMore($c, state[curType]); |
115 | } | 115 | } |
116 | +} | ||
117 | + | ||
118 | +$(window).scroll(function() { | ||
119 | + window.requestAnimationFrame(scrollHandler); | ||
116 | }); | 120 | }); |
117 | 121 | ||
118 | $nav.on('touchstart', function(e) { | 122 | $nav.on('touchstart', function(e) { |
@@ -40,8 +40,12 @@ if ($tag.length > 0) { | @@ -40,8 +40,12 @@ if ($tag.length > 0) { | ||
40 | }); | 40 | }); |
41 | } | 41 | } |
42 | 42 | ||
43 | -$(document).scroll(function() { | 43 | +function scrollHandler() { |
44 | if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infos.height()) { | 44 | if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infos.height()) { |
45 | loadMore($infos, setting); | 45 | loadMore($infos, setting); |
46 | } | 46 | } |
47 | +} | ||
48 | + | ||
49 | +$(window).scroll(function() { | ||
50 | + window.requestAnimationFrame(scrollHandler); | ||
47 | }); | 51 | }); |
@@ -138,8 +138,12 @@ $('.maybe-like p').on('touchstart', function (e) { | @@ -138,8 +138,12 @@ $('.maybe-like p').on('touchstart', function (e) { | ||
138 | }); | 138 | }); |
139 | 139 | ||
140 | //srcoll to load more | 140 | //srcoll to load more |
141 | -$(window).scroll(function () { | 141 | +function scrollHandler() { |
142 | if ($(window).scrollTop() + winH >= $(document).height() - 50) { | 142 | if ($(window).scrollTop() + winH >= $(document).height() - 50) { |
143 | search(); | 143 | search(); |
144 | } | 144 | } |
145 | +} | ||
146 | + | ||
147 | +$(window).scroll(function() { | ||
148 | + window.requestAnimationFrame(scrollHandler); | ||
145 | }); | 149 | }); |
@@ -91,9 +91,8 @@ var updateLayerPosition = (function() { | @@ -91,9 +91,8 @@ var updateLayerPosition = (function() { | ||
91 | }; | 91 | }; |
92 | })(); | 92 | })(); |
93 | 93 | ||
94 | -$win.scroll(function() { | ||
95 | - updateLayerPosition(); | 94 | +$(window).scroll(function() { |
95 | + window.requestAnimationFrame(updateLayerPosition); | ||
96 | }); | 96 | }); |
97 | 97 | ||
98 | - | ||
99 | $doc.on('ready', updateLayerPosition); | 98 | $doc.on('ready', updateLayerPosition); |
@@ -206,9 +206,8 @@ favContentHammer.on('tap', function(e) { | @@ -206,9 +206,8 @@ favContentHammer.on('tap', function(e) { | ||
206 | }); | 206 | }); |
207 | }); | 207 | }); |
208 | 208 | ||
209 | -// 上拉加载更多 | ||
210 | -$(document).scroll(function() { | ||
211 | 209 | ||
210 | +function scrollHandler() { | ||
212 | if ($(window).scrollTop() + winH >= $(document).height() - footerH) { | 211 | if ($(window).scrollTop() + winH >= $(document).height() - footerH) { |
213 | 212 | ||
214 | if (brandTab) { | 213 | if (brandTab) { |
@@ -231,4 +230,8 @@ $(document).scroll(function() { | @@ -231,4 +230,8 @@ $(document).scroll(function() { | ||
231 | } | 230 | } |
232 | } | 231 | } |
233 | } | 232 | } |
233 | +} | ||
234 | + | ||
235 | +$(window).scroll(function() { | ||
236 | + window.requestAnimationFrame(scrollHandler); | ||
234 | }); | 237 | }); |
@@ -18,13 +18,17 @@ var setting = { | @@ -18,13 +18,17 @@ var setting = { | ||
18 | end: false | 18 | end: false |
19 | }; | 19 | }; |
20 | 20 | ||
21 | +function scrollHandler() { | ||
22 | + if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infoList.height()) { | ||
23 | + loadMore($infoList, setting, '/home/myguang'); | ||
24 | + } | ||
25 | +} | ||
26 | + | ||
21 | //对于有逛收藏的页面进行事件处理 | 27 | //对于有逛收藏的页面进行事件处理 |
22 | if ($infoList.length > 0) { | 28 | if ($infoList.length > 0) { |
23 | info.initInfosEvt($infoList); | 29 | info.initInfosEvt($infoList); |
24 | 30 | ||
25 | $(window).scroll(function() { | 31 | $(window).scroll(function() { |
26 | - if ($(window).scrollTop() + winH >= $(document).height() - 0.25 * $infoList.height()) { | ||
27 | - loadMore($infoList, setting, '/home/myguang'); | ||
28 | - } | 32 | + window.requestAnimationFrame(scrollHandler); |
29 | }); | 33 | }); |
30 | } | 34 | } |
@@ -167,7 +167,7 @@ orderHammer.on('tap', function(e) { | @@ -167,7 +167,7 @@ orderHammer.on('tap', function(e) { | ||
167 | } | 167 | } |
168 | }); | 168 | }); |
169 | 169 | ||
170 | -$(window).scroll(function() { | 170 | +function scrollHandler() { |
171 | if (order.end === false && $(window).scrollTop() + winH > | 171 | if (order.end === false && $(window).scrollTop() + winH > |
172 | $(document).height() - 0.25 * $orderContainer.height()) { | 172 | $(document).height() - 0.25 * $orderContainer.height()) { |
173 | 173 | ||
@@ -176,6 +176,10 @@ $(window).scroll(function() { | @@ -176,6 +176,10 @@ $(window).scroll(function() { | ||
176 | noLoadingMask: true | 176 | noLoadingMask: true |
177 | }); | 177 | }); |
178 | } | 178 | } |
179 | +} | ||
180 | + | ||
181 | +$(window).scroll(function() { | ||
182 | + window.requestAnimationFrame(scrollHandler); | ||
179 | }); | 183 | }); |
180 | 184 | ||
181 | //初始化请求第一页数据 | 185 | //初始化请求第一页数据 |
@@ -362,13 +362,17 @@ $listNav.on('touchend touchcancel', function(e) { | @@ -362,13 +362,17 @@ $listNav.on('touchend touchcancel', function(e) { | ||
362 | } | 362 | } |
363 | }); | 363 | }); |
364 | 364 | ||
365 | -$(window).scroll(function() { | 365 | +function scrollHandler() { |
366 | 366 | ||
367 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 | 367 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 |
368 | if ($(window).scrollTop() + winH > | 368 | if ($(window).scrollTop() + winH > |
369 | $(document).height() - 0.25 * $goodsContainer.height()) { | 369 | $(document).height() - 0.25 * $goodsContainer.height()) { |
370 | search(); | 370 | search(); |
371 | } | 371 | } |
372 | +} | ||
373 | + | ||
374 | +$(window).scroll(function() { | ||
375 | + window.requestAnimationFrame(scrollHandler); | ||
372 | }); | 376 | }); |
373 | 377 | ||
374 | if ($brandHeader.length > 0) { | 378 | if ($brandHeader.length > 0) { |
@@ -351,7 +351,7 @@ $listNav.on('touchend touchcancel', function(e) { | @@ -351,7 +351,7 @@ $listNav.on('touchend touchcancel', function(e) { | ||
351 | e.stopPropagation(); | 351 | e.stopPropagation(); |
352 | }); | 352 | }); |
353 | 353 | ||
354 | -$(window).scroll(function() { | 354 | +function scrollHandler() { |
355 | 355 | ||
356 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 | 356 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 |
357 | if ($(window).scrollTop() + winH > | 357 | if ($(window).scrollTop() + winH > |
@@ -360,6 +360,10 @@ $(window).scroll(function() { | @@ -360,6 +360,10 @@ $(window).scroll(function() { | ||
360 | search(); | 360 | search(); |
361 | } | 361 | } |
362 | } | 362 | } |
363 | +} | ||
364 | + | ||
365 | +$(window).scroll(function() { | ||
366 | + window.requestAnimationFrame(scrollHandler); | ||
363 | }); | 367 | }); |
364 | 368 | ||
365 | //初始请求最新第一页数据 | 369 | //初始请求最新第一页数据 |
@@ -53,7 +53,8 @@ function hotrank(page, sort, tabId, notab) { | @@ -53,7 +53,8 @@ function hotrank(page, sort, tabId, notab) { | ||
53 | }); | 53 | }); |
54 | } | 54 | } |
55 | 55 | ||
56 | -$(window).scroll(function () { | 56 | +function scrollHandler() { |
57 | + | ||
57 | if (page === 2) { | 58 | if (page === 2) { |
58 | return; | 59 | return; |
59 | } | 60 | } |
@@ -63,8 +64,12 @@ $(window).scroll(function () { | @@ -63,8 +64,12 @@ $(window).scroll(function () { | ||
63 | page = 2; | 64 | page = 2; |
64 | notab = 1; | 65 | notab = 1; |
65 | hotrank(page, sort, id, notab); | 66 | hotrank(page, sort, id, notab); |
67 | +} | ||
66 | 68 | ||
69 | +$(window).scroll(function() { | ||
70 | + window.requestAnimationFrame(scrollHandler); | ||
67 | }); | 71 | }); |
72 | + | ||
68 | hotrank(page, sort, id, notab); | 73 | hotrank(page, sort, id, notab); |
69 | hotnav = new Hammer(document.getElementById('hotRank')); | 74 | hotnav = new Hammer(document.getElementById('hotRank')); |
70 | hotnav.on('tap', function (e) { | 75 | hotnav.on('tap', function (e) { |
@@ -359,7 +359,8 @@ $listNav.on('touchend touchcancel', function(e) { | @@ -359,7 +359,8 @@ $listNav.on('touchend touchcancel', function(e) { | ||
359 | e.stopPropagation(); | 359 | e.stopPropagation(); |
360 | }); | 360 | }); |
361 | 361 | ||
362 | -$(window).scroll(function() { | 362 | + |
363 | +function scrollHandler() { | ||
363 | 364 | ||
364 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 | 365 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 |
365 | if ($(window).scrollTop() + winH > | 366 | if ($(window).scrollTop() + winH > |
@@ -368,6 +369,10 @@ $(window).scroll(function() { | @@ -368,6 +369,10 @@ $(window).scroll(function() { | ||
368 | search(); | 369 | search(); |
369 | } | 370 | } |
370 | } | 371 | } |
372 | +} | ||
373 | + | ||
374 | +$(window).scroll(function() { | ||
375 | + window.requestAnimationFrame(scrollHandler); | ||
371 | }); | 376 | }); |
372 | 377 | ||
373 | //初始请求最新第一页数据 | 378 | //初始请求最新第一页数据 |
-
Please register or login to post a comment