Từ 1 tới 4 trên tổng số 4 kết quả

Đề tài: load hình theo từng nhóm trong jQuery

  1. #1
    Ngày gia nhập
    12 2009
    Bài viết
    147

    Mặc định load hình theo từng nhóm trong jQuery

    hy vọng mọi người sẽ giúp đỡ được mình, không biết post bài này ở đâu nên post vào đây, mình muốn load 10 tấm hình chia ra làm 2 block, mỗi block 5 tấm, sau khi block 1 load xong (5 tấm đầu tiên ấy) sẽ đến lượt bock 2 (5 tấm cuối), mình có thể làm sao đây



    block 2 thức sự load khi block 1 đã load xong chứ ko phải là nó load cùng lúc với block 1 rồi hiển thị lên sau ạ

  2. #2
    Ngày gia nhập
    10 2009
    Nơi ở
    gầm cầu
    Bài viết
    156

    mà nó Load lúc nào kệ nó chứ .Gọi phương thức $(".block2").hide() thì ko ai thấy . lúc nào cần thì show ra . Tớ đoán thế

  3. #3
    Ngày gia nhập
    12 2009
    Bài viết
    147

    không được đâu bạn, ví dụ như bạn có 1 slide show trình diễn ảnh đi, có chùng 100 hình, mỗi hình 3mb, yêu cầu không được giảm chất lượng của ảnh, vậy không lẻ bạn load hết toàn bộ ảnh lên sao, mình đưa ra giải pháp là load theo từng block 1, cách đó mình đã làm ra rồi, ra là post lên đây liền cho những ai sau này cần, các hình mình làm trong ví dụ này đều là hình có độ phân giải cao nên các bạn có thể thấy được kết quả ^^, hoặc bạn nhấn F12 trong chrome, vào phần network để xem cách nó chạy, bạn nào có thắc mắc cách làm này hay có cách nào hay hơn up lên anh em tham khảo nhé

    Code:
    #imgContainer > img
    {
        margin-right: 10px;
        height: 256px;
        width: 210px;
    }
    Code:
    <div id="imgContainer">  
    </div>
    <img class="awaitImage" src="http://www.quarpro.com/media/ajax_wait.gif" />
    Code:
    <script>
        var images = ['http://1static.myopera.com/community/graphics/speeddials/Opera-Background-Blue-Swirls.jpg',
                     'http://coolbackgroundsite.com/wp-content/uploads/2010/12/easter-powerpoint-background.jpg',
                     'http://1realitypod.com/wp-content/uploads/2010/10/ipad-background-12.jpg',
                     'http://static.travelblog.org/Wallpaper/pix/waterfall_desktop_background-1600x1200.jpg',
                    'http://www.dvd-ppt-slideshow.com/images/ppt-background/background-15.jpg',
                    'http://mastimasaala.com/wp-content/uploads/2012/08/Abstract_Background_10.jpg',
                    'http://openwalls.com/image/21841/vaio_green_background_1920x1200.jpg',
                    'http://www.fun54.com/wp-content/uploads/2012/02/beautiful-white-flowers-in-fields-with-blue-sky-background-hd-wallpapers-1920-x-1080.jpg',
                    'http://www.designmyprofile.com/images/graphics/backgrounds/background0081.jpg'];
    
        loadGroup();
    
        function loadGroup() {
    
            EachGroup();
    
            function EachGroup() {
                var sourceSplited = images.splice(0, 4); // cái này giống như tách từ mảng images ra 1 mảng mới bắt đầu vị trí thứ 0, lấy 4 hình
    
                if (images.length ==0) { // sau mỗi lần chạy lại hàm này nó kiểm tra xem trên cái mảng images xem còn hình hay ko, nếu hết hình rồi thì cái hình chờ sẽ mất đi
                    $(".awaitImage").hide();
                }
    
                var mang = new Array();
                for (var i = 0; i < sourceSplited.length; i++) { // vòng for nay de cho no load đồng bộ các hình trong 1 block 
                    $("<img />", {
                        src: sourceSplited[i],
                        id: i,
                        error: function () { // khi load hình lên nếu bị lỗi, ví dụ link die, thì hàm này sẽ làm việc
                            $(this).replaceWith("<img src=" + "http://icons.iconarchive.com/icons/kyo-tux/phuzion/256/Sign-Error-icon.png" + " />") // hình này sẽ thay thế cho cái hình bị lỗi
                            mang[this.id] = i; // khi link bị die thì chúng ta vẫn phải gán cái phần tử bị die đó vào đây, dể lát nữa khi load các hình còn lại nó vẫn đảm bảo được mảng của chúng ta có đủ 4 giá trị
                        },
                        load: function () { // khi load xong 1 hình hàm load này sẽ làm việc
                            mang[this.id] = i; // ko dung mang[i] vi vong lap no lap xong truoc khi load xong anh nen dung cach do la sai, dung cach nay de lay id cua tung image bo vao mang
                            if (mang[0] != null && mang[1] != null && mang[2] != null && mang[3] != null) { // mỗi lần chạy nó sẽ kiểm tra, nếu mảng mình có đủ 4 hình đã load xong thì nó sẽ gọi lại hàm EachGroup() lần nữa
                                EachGroup(); // lúc gọi lại lần này, nó sẽ chạy lại hàm splice() để lấy 4 hình tiếp theo, doi hồi nãy cắt ra 4 hình rồi, giớ cắt ra 4 hình tiếp, nếu ko đủ 4 hình thì có bao nhiêu hình nó lấy hết
                            }
                        }
                    }).appendTo("#imgContainer")
                }
                
            }
        }
    </script>
    trong ví dụ trên mình để hình số 1 và số 3 bị lỗi, để kiểm tra xem nếu bị lỗi nó làm việc ra sao, nếu muốn chạy được các bạn bỏ số 1 đi: http://1
    Đã được chỉnh sửa lần cuối bởi tinhthanhiepsi9x : 23-01-2013 lúc 02:51 PM.

  4. #4
    Ngày gia nhập
    12 2009
    Bài viết
    147

    cách trên là load hình ảnh theo block, ví dụ có 2 block mỗi block 5 hình thì block 1 và 2 load cùng lúc 5 hình lên, và block 2 chờ block 1 load xong nó mới load, còn cách này là load từng ảnh 1 trong 1 tập hợp hình ảnh, ví dụ bạn có 10 hình thì nó sẽ load từng hình 1, xong hình này mới đến hình kia, cách trên là mở rộng của cách này ^^

    Code:
    img
    {
        border: 5px solid #c8c8c8;
        margin-right: 10px;
        height: 256px;
        width: 210px;
    }
    Code:
    <div id="imgContainer"></div>
    Code:
    <script>
        var images = ['http://static.myopera.com/community/graphics/speeddials/Opera-Background-Blue-Swirls.jpg',
                     'http://www.designmyprofile.com/images/graphics/backgrounds/background0172.jpg',
                     'http://www.designmyprofile.com/images/graphics/backgrounds/background0188.jpg',
                     'http://static.travelblog.org/Wallpaper/pix/waterfall_desktop_background-1600x1200.jpg'];
    
        function loadImages() {
            if (!images.length)
                return;
    
            $('<img />', {
                src: images.splice(0, 1),
                load: loadImages
            }).appendTo('#imgContainer');
        }
    
        loadImages();
    </script>
    Đã được chỉnh sửa lần cuối bởi tinhthanhiepsi9x : 23-01-2013 lúc 02:57 PM.

Các đề tài tương tự

  1. Phân quyền truy cập theo nhóm User trong asp.net c#
    Gửi bởi tranvancoit trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 9
    Bài viết cuối: 02-06-2017, 09:29 PM
  2. Database Cách gom nhóm theo ngày trong LINQ?
    Gửi bởi quoctai_pham trong diễn đàn Thắc mắc lập trình C#
    Trả lời: 5
    Bài viết cuối: 09-03-2013, 01:31 PM
  3. Trả lời: 0
    Bài viết cuối: 03-12-2011, 04:28 PM
  4. Ngẳt trang theo nhóm trong crystal report - C#
    Gửi bởi manhhungbgo trong diễn đàn Thắc mắc lập trình C#
    Trả lời: 2
    Bài viết cuối: 10-11-2011, 01:25 AM
  5. Hỏi cách gộp các record theo nhóm trong crytal?
    Gửi bởi who_am_i trong diễn đàn Thắc mắc Microsoft SQL Server & Microsoft Access
    Trả lời: 5
    Bài viết cuối: 21-09-2009, 05:58 PM

Quyền hạn của bạn

  • Bạn không thể gửi đề tài mới
  • Bạn không thể gửi bài trả lời
  • Bạn không thể gửi các đính kèm
  • Bạn không thể chỉnh sửa bài viết của bạn