Bagaimana untuk melaksanakan halaman lompat dalam javascript

JavaScript ialah bahasa pengaturcaraan yang biasa digunakan yang sering digunakan dalam pembangunan web. Dalam reka bentuk web, fungsi melompat ke halaman sering digunakan Dalam proses ini, melompat ke halaman adalah salah satu kaedah yang paling biasa digunakan. JavaScript juga boleh membantu pengguna mengoptimumkan halaman dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan anda kepada pengetahuan yang berkaitan menggunakan JavaScript untuk melaksanakan lompat halaman dan mengoptimumkan halaman.

1. Cara melaksanakan halaman lompat JavaScript

Terdapat banyak cara untuk melompat ke halaman JavaScript, seperti menggunakan pautan URL, menggunakan location.href, menggunakan window.location.replace, dsb. Di bawah ini kami akan menerangkan kaedah ini kepada anda secara terperinci.

Kaedah 1: Gunakan pautan URL

Kaedah ini sangat mudah Anda hanya perlu menambah hiperpautan dalam kod HTML >Apabila pengguna mengklik pautan ini, penyemak imbas akan melompat terus ke tapak web Baidu.

<a href="http://www.baidu.com">百度一下</a>

Kaedah 2: Gunakan location.href

Adalah perkara biasa untuk menggunakan kaedah location.href untuk melompat ke halaman JavaScript. Kodnya adalah seperti berikut:

Kaedah ini boleh digunakan dalam Dipanggil terus dalam JavaScript, ia akan memindahkan halaman semasa pelayar ke laman web Baidu saya.

location.href='http://www.baidu.com';

Kaedah 3: Gunakan window.location.replace

Gunakan kaedah window.location.replace untuk mengemas kini alamat URL halaman apabila halaman melompat Kodnya adalah seperti berikut:

Kaedah ini akan mengemas kini URL halaman apabila halaman melompat, dan juga boleh mengelakkan masalah seperti butang belakang.

window.location.replace('http://www.baidu.com');

Kaedah 4: Gunakan window.location.assign

Gunakan kaedah window.location.assign untuk mengambil URL sebagai parameter dan memuatkan dokumen yang dipaparkan ke lokasi yang ditentukan oleh URL. Kodnya adalah seperti berikut:

Kaedah ini pada asasnya sama dengan kaedah location.href, tetapi kaedah window.location.assign mungkin lebih dipercayai dalam beberapa kes.

window.location.assign('http://www.baidu.com');

2. Cara mengoptimumkan halaman

Selepas anda melaksanakan lompatan halaman JavaScript, anda juga boleh menggunakan JavaScript untuk mengoptimumkan halaman tapak web. Berikut ialah beberapa kaedah pengoptimuman JavaScript biasa untuk anda.

Kaedah 1: Gunakan pemuatan dinamik

Pemuatan dinamik bermakna apabila halaman dimuatkan, hanya bahagian kandungan yang diperlukan dimuatkan dan bukannya memuatkan semua kandungan. Pendekatan ini boleh mengurangkan masa muat halaman dan meningkatkan pengalaman pengguna. Contohnya:

Kod ini akan memuatkan imej secara dinamik selepas halaman dimuatkan, bukannya memuatkan semua imej pada permulaan.

window.onload = function() {
    var myImage = new Image();
    myImage.src = 'http://example.com/wp-content/uploads/2017/08/example.png';
    document.body.appendChild(myImage);
}

Kaedah 2: Gunakan caching

Menggunakan caching boleh mengurangkan masa muat turun berulang dan meningkatkan kelajuan akses tapak web. Untuk menggunakan caching dalam JavaScript, anda boleh menggunakan objek localStorage. Contohnya:

Kod ini akan menyemak sama ada pengguna telah melawat tapak web Jika ia telah dilawati, data akan dibaca terus daripada cache tanpa memuat turun semula.

if (localStorage.getItem('visited')) {
    alert('欢迎再次访问！');
} else {
    alert('欢迎访问我们的网站！');
    localStorage.setItem('visited', 'yes');
}

Kaedah 3: Gunakan pemuatan imej yang malas

Pemuatan imej yang malas bermakna tidak memuatkan semua imej secara automatik apabila halaman dimuatkan, tetapi menunggu sehingga pengguna menatal halaman atau syarat lain dipenuhi sebelum memuatkan imej. Kaedah ini boleh mempercepatkan pemuatan laman web dan meningkatkan pengalaman pengguna. Contohnya:

Kod ini hanya akan mula memuatkan imej apabila pengguna menatal halaman, bukannya memuatkan semua imej pada permulaan.

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

var images = document.querySelectorAll(&#39;img[data-src]&#39;);
function preloadImage(img) {
    var src = img.getAttribute(&#39;data-src&#39;);
    if (!src) {
        return;
    }
    img.src = src;
    img.removeAttribute(&#39;data-src&#39;);
}

var imgOptions = {
    threshold: 0,
    rootMargin: "0px 0px 0px 0px"
};

var imgObserver = new IntersectionObserver(
    (entries, imgObserver) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                preloadImage(entry.target);
                imgObserver.unobserve(entry.target);
            }
        });
    }, 
    imgOptions
);

images.forEach(image => {
    imgObserver.observe(image);
});

3. Ringkasan

Dalam reka bentuk web, menggunakan JavaScript untuk melompat ke halaman boleh membantu pengguna mengakses tapak web yang dikehendaki dengan lebih cepat. Pada masa yang sama, JavaScript juga boleh meningkatkan pengalaman akses pengguna dengan mengoptimumkan halaman, seperti menggunakan pemuatan dinamik, caching dan pemuatan malas imej. Sama ada dalam reka bentuk web atau pembangunan web, JavaScript ialah alat penting.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan halaman lompat dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!