jQuery – 使用 jquery.appear 取代 jquery.lazyload 非真實的延遲加載
jquery.lazyload 並未真正的延遲加載
因為一開始src就放了真實的路徑，而jQ一定都等畫面加載完畢才會執行
所以只是視覺上的延遲加載
實際上必沒有
所已用了 jquery.appear 替代
這樣就能滾到出現的元素才開始加載
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
; html-script: false ] <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="請自行添加jq appear路徑"></script> <script> $(function (){ $('img').appear(); $("img").on("appear", function () { //加載過就不觸發 if ($(this).attr('data-isload-realsec') == 'true') return false; //console.log('1'); //fadeIn效果讀取原圖 $(this) .hide() .attr('src', $(this).attr('data-realsec')) .fadeIn() .attr('data-isload-realsec', 'true'); }) //因為這個版本的jquery appear 需要滾動滑鼠才會偵測， //所以我們讓他滾動1px就好，這樣一進入畫面就出現在頁面上的元素才會開始動作 $(document).scrollTop(1); }) </script> <!-- img src 放置未載入的無聊圖檔 data-realsec 放置真正的圖檔路徑 --> <img src="images/imgloading.jpg" data-realsec="upload/Album/63/File_2012122716003659.JPG" > <div style="margin:4000px 0 0 0 ;"></div> <img src="images/imgloading.jpg" data-realsec="upload/Album/63/File_2012122716083032.JPG" > |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
; html-script: false ] 這是v0.3.1的版本 官網：http://plugins.jquery.com/appear/ 說明：https://github.com/morr/jquery.appear <pre class="brush: php; gutter: true; first-line: 1; highlight: []; html-script: false"> /* * jQuery appear plugin * * Copyright (c) 2012 Andrey Sidorov * licensed under MIT license. * * https://github.com/morr/jquery.appear/ * * Version: 0.3.1 */ (function($) { var selectors = []; var check_binded = false; var check_lock = false; var defaults = { interval: 250, force_process: false } var $window = $(window); var $prior_appeared; function process() { check_lock = false; for (var index in selectors) { var $appeared = $(selectors[index]).filter(function() { return $(this).is(':appeared'); }); $appeared.trigger('appear', [$appeared]); if ($prior_appeared) { var $disappeared = $prior_appeared.not($appeared); $disappeared.trigger('disappear', [$disappeared]); } $prior_appeared = $appeared; } } // "appeared" custom filter $.expr[':']['appeared'] = function(element) { var $element = $(element); if (!$element.is(':visible')) { return false; } var window_left = $window.scrollLeft(); var window_top = $window.scrollTop(); var offset = $element.offset(); var left = offset.left; var top = offset.top; if (top + $element.height() >= window_top && top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() && left + $element.width() >= window_left && left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) { return true; } else { return false; } } $.fn.extend({ // watching for element's appearance in browser viewport appear: function(options) { var opts = $.extend({}, defaults, options || {}); var selector = this.selector || this; if (!check_binded) { var on_check = function() { if (check_lock) { return; } check_lock = true; setTimeout(process, opts.interval); }; $(window).scroll(on_check).resize(on_check); check_binded = true; } if (opts.force_process) { setTimeout(process, opts.interval); } selectors.push(selector); return $(selector); } }); $.extend({ // force elements's appearance check force_appear: function() { if (check_binded) { process(); return true; }; return false; } }); })(jQuery); |