it-swarm-vi.com

Làm thế nào một mô-đun có thể bị vô hiệu hóa dựa trên kích thước thiết bị hoặc khung nhìn trong Joomla 3 để tối ưu hóa hiệu suất cho thiết bị di động?

Tôi là người đề xuất Thiết kế Web đáp ứng kết hợp với Thiết kế web thích ứng (nghĩa là - một thiết kế điều chỉnh hiển thị cho tất cả các thiết bị và cung cấp nội dung dựa trên kích thước cổng xem) trái ngược với thiết kế trang web 'di động' riêng biệt.

Có một số nhược điểm, ví dụ, trên màn hình lớn, tôi muốn bao gồm một số mô-đun sẽ bị ẩn cho kích thước khung nhìn nhỏ hơn. Tuy nhiên, trong trường hợp một mô-đun bị ẩn dựa trên kích thước khung nhìn, tải và thực thi mô-đun đó gây ra một cú đánh hiệu suất không cần thiết khi biết rằng mô-đun cụ thể sẽ không bao giờ được hiển thị ở kích thước khung nhìn nhỏ hơn.

Làm cách nào tôi có thể sử dụng kích thước khung nhìn để vô hiệu hóa một mô-đun một cách hiệu quả (tức là ngăn không cho nó thực thi) để tăng tốc hiệu suất?

14
NivF007

Trình quản lý mô-đun nâng cao ( http://www.nonumber.nl/extensions/adv cânmodulemanager ) cho phép bạn chỉ định các mô-đun dựa trên TYPE của trình duyệt. Vì vậy, bạn có thể chọn thiết bị di động, hoặc máy tính để bàn hoặc thiết bị cụ thể. Tuy nhiên, nó không cho phép bạn chọn theo kích thước, vì vậy nó chỉ hữu ích ở một mức độ.

Nó cũng có thể có thể với sự kết hợp của php và javascript. Tôi sẽ gửi câu hỏi này cho bạn thân của tôi, anh ta có thể có một ý tưởng.

15
Faye

Tôi không nghĩ bạn nên vô hiệu hóa các mô-đun như thế và vẫn gọi nó là thiết kế đáp ứng. Một phần của điểm nhạy cảm là nó sẽ đáp ứng với những thay đổi của chế độ xem và không chỉ là nó in ra một bố cục khác cho các kích thước màn hình khác nhau.

Tùy thuộc vào kích thước màn hình mẫu, có thể một máy tính bảng ở chế độ dọc sẽ khiến mô-đun không tải nhưng sau đó cùng một máy tính bảng đó có thể cần nội dung đó một lần ở chế độ ngang.

10
Spunkie

Đây là một lớp JS tôi đã tạo cách đây một thời gian có thể sử dụng javascript để phát hiện các khung nhìn, nó chưa bao giờ được đưa vào thử nghiệm nghiêm ngặt nhưng hoạt động.

function ResJS(){
    this.min = 0;
    this.max = 0;
    this.config = config;
    this.width = function(){
        return jQuery(window).width();
    }
    this.breakpoint = function(min,max){
        this.min = min;
        this.max = max;
        this.outside = false;
        this.inside = false;
        this.triggeredOut = false;
        this.triggeredIn = false;
        this.enter = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.min<context.width()&&context.max>context.width()){
                    if(!context.triggeredIn){
                        jQuery(document).ready(function(){callback(context.min,context.max)});
                        context.inside = true; //browser width has entered breakpoint
                        context.outside = false; //browser has left another breakpoint
                        context.triggeredIn = true; //triggered event for breakpoint
                        context.triggeredOut = false; //be ready to trigger leave event
                    }
                }else{
                    context.inside = false; //browser width is not within breakpoint
                    context.outside = true; //brower width is outside of breakpoint
                }
            });
            if(context.min<context.width()&&context.max>context.width()){
                jQuery(document).ready(function(){callback(context.min,context.max)});
                context.inside = true;
                context.outside = false;
                context.triggeredIn = true;
                context.triggeredOut = false;
            }else{
                context.inside = false;
                context.outside = true;
                context.triggeredOut = true;
                context.triggeredIn = false;
            }
            return this;
        }
        this.leave = function(callback){
            var context = this;
            jQuery(window).on('resize',function(){
                if(context.outside&&!context.triggeredOut){
                    jQuery(document).ready(function(){callback(context.min,context.max)});
                    context.triggeredIn = false;
                    context.triggeredOut = true;
                }
            });     
            return this;
        }
        return this;
    }
    return this;
}

Về cơ bản bạn sử dụng nó như thế này

ResJS()
    .breakpoint(0,600)
    .enter(function(min,max){
        console.log(min,max,'enter');
    })
    .leave(function(min,max){
        console.log(min,max,'leave');
    });

Breakpoint có các tham số tối thiểu/tối đa cho chiều rộng, sau đó là một chuỗi được nối để nhập và rời đi, với một cuộc gọi lại để chạy một số mã JS.

Tôi không thể đi chi tiết về cách thức hoạt động của nó, vì tôi đã làm nó rất lâu rồi nhưng bạn có thể sử dụng nó miễn phí nếu nó có ích. Điều này có thể được sử dụng để tải các mô-đun thông qua ajax dựa trên chế độ xem. Tôi tin rằng com_ajax của j Joomla có thể được sử dụng với điều này để tạo ra một số tính năng thực sự thú vị.

8
Jordan Ramstad

Một giải pháp khác:

Bạn có thể sử dụng phát hiện Thiết bị phía máy chủ như thế này: http://mobiledetect.net/ tại đây Plugin Joomla http://www.yagendoo.com/en/blog/free- mobile-phát hiện-plugin-for-j Joomla.html và sau đó mở rộng j Joomla/samples/yourtemplate/html/Module.php với kiểu mod_chrom của riêng bạn. Sau đó, bạn có thể viết bao nhiêu php nếu các câu lệnh bạn thích cho bất kỳ thiết bị hoặc độ phân giải nào.

3
Joomla Agency

Nếu bạn muốn tăng tốc hiệu suất thì đừng tải các mô-đun không cần thiết. Nếu nó không cần thiết trên màn hình nhỏ thì nó cũng không cần thiết trên màn hình lớn hơn.

Những người có màn hình thiết bị lớn hơn cũng muốn có một trang web nhanh mà không tải các hành trình không cần thiết. Bạn đang đưa ra giả định sai lầm rằng màn hình lớn hơn có sẵn nhiều băng thông hơn. Họ không.

Hãy là một nhà thiết kế giỏi và cung cấp cho tất cả người dùng của bạn trải nghiệm trang web được tối ưu hóa, bất kể kích thước màn hình của họ.

3
Seth Warburton

Tôi thường sử dụng css @media để thực hiện điều này. Làm cho nó đơn giản để ẩn mọi thứ tùy thuộc vào kích thước màn hình và phân tích chúng theo thời gian khi một máy tính bảng phong cảnh đủ rộng để hiển thị và chiều rộng chân dung thì không. Đây là một ví dụ:

@media (max-width:699px) {
    #moduleid, .modulewrapperclass {display:none}
}

Tôi thường sử dụng điều này để ẩn toàn bộ vị trí mô-đun vì vậy tôi dựa vào bộ chọn css của mình trên trình bao bọc của vị trí đó (hoặc vị trí trong một số mẫu).

2
pathfinder

Tôi sẽ đề nghị rằng trình duyệt đánh hơi là cách sai để đi đến đây. Nếu bạn thực sự chỉ muốn tải các mô-đun dựa trên chiều rộng màn hình, bạn cần chạy một số javascript, sau đó gọi mô-đun bằng AJAX (com_ajax). Hãy nhớ rằng có thể có một khoản tiền về mặt tối ưu hóa công cụ tìm kiếm cho nội dung được tải bởi AJAX.

2
Jeepstone

Bạn có thể tải nó theo yêu cầu bằng cách sử dụng một số javascript gọi com_ajax và chỉ trả về các mô-đun cho kích thước hiện tại.

1
Harald Leithner

Bạn có thể sử dụng hậu tố mô-đun kết hợp với truy vấn phương tiện. Nhiều khung mẫu đã được tích hợp sẵn trong đó bạn có thể thêm một lớp "điện thoại ẩn" để không hiển thị chúng trên thiết bị di động. Họ gọi chúng là các lớp Trình trợ giúp CSS:

GANTRY: http://www.gantry-framework.org/documentation/j Joomla/advified/resource/grid_system.md

WARP: http://www.yootheme.com/blog/2012/06/12/warp-gets-responsive

0
YellowWebMonkey