Wie kann ich mit JavaScript Inhalte skalieren, die automatisch geladen werden, wenn zum Ende der Seite gescrollt wird, und den Effekt des Seitenverhältnisses beibehalten?

JavaScript Wie erreiche ich das Scrollen zum Ende der Seite, um den Inhaltszoom automatisch zu laden und den Seitenverhältniseffekt beizubehalten?

Im modernen Webdesign ist das Scrollen zum Ende der Seite, um automatisch mehr Inhalte zu laden, zu einer häufigen Funktionsanforderung geworden. Wenn der geladene Inhalt Bilder enthält, möchten wir oft, dass diese Bilder ihr ursprüngliches Seitenverhältnis beibehalten. In diesem Artikel wird die Verwendung von JavaScript zum Implementieren dieser Funktion vorgestellt und entsprechende Codebeispiele als Referenz bereitgestellt.

Zuerst müssen wir die Scrollposition der Seite ermitteln. In JavaScript können Sie das Ereignis scroll verwenden, um den Seitenscrollvorgang zu überwachen und den vertikalen Abstand des aktuellen Seitenscrollvorgangs über die Eigenschaft window.scrollY zu ermitteln. scroll 事件来监听页面滚动的动作，并通过 window.scrollY 属性来获取当前页面滚动的垂直距离。

接下来，我们可以通过比较当前页面的滚动位置与页面的总高度来判断是否滚动到了底部。若当前页面滚动位置加上窗口的可见高度大于或等于页面的总高度，即表示已经滚动到底部。

当滚动到底部时，我们可以进行加载更多内容的操作。在本示例中，我们将使用模拟的数据进行演示，以便集中展示关键技术。实际项目中，你需要根据自己项目的需求和数据接口进行相应的修改。

window.addEventListener('scroll', function() {
  var windowHeight = window.innerHeight; // 可见窗口的高度
  var fullHeight = document.body.clientHeight; // 页面的总高度
  var scrollTop = window.scrollY; // 页面滚动的垂直距离

  if (scrollTop + windowHeight >= fullHeight) {
    // 加载更多内容的代码，以下为示例
    var newData = getMoreData(); // 模拟获取更多数据的函数
    var container = document.getElementById('container'); // 内容容器的 DOM 元素

    newData.forEach(function(item) {
      var img = document.createElement('img');
      img.src = item.src;
      img.onload = function() {
        // 图片加载完成后，计算该图片的缩放比例
        var ratio = Math.min(window.innerWidth / img.width, windowHeight / img.height);
        img.style.width = img.width * ratio + 'px';
        img.style.height = img.height * ratio + 'px';
        container.appendChild(img);
      };
    });
  }
});

function getMoreData() {
  // 模拟获取更多数据的函数，返回一个包含图片信息的数组
  return [
    { src: 'image1.jpg' },
    { src: 'image2.jpg' },
    { src: 'image3.jpg' },
    // ...
  ];
}

在上述示例代码中，我们在滚动事件的回调函数中，判断是否滚动到页面底部。如果是，则调用 getMoreData() 函数模拟获取更多数据的操作，并对每个图片计算缩放比例，保持纵横比。通过调整 IMG 元素的 width 和 height 样式来实现缩放效果。

需要注意的是，在图片加载完成后，我们才能获取到图片的原始宽高，所以在图片加载完成前，我们先创建一个临时的 IMG 元素，并设置 src 属性。然后在图片加载完成时，再计算缩放比例并设置 width 和 height

Als nächstes können wir feststellen, ob der Bildlauf den unteren Rand erreicht hat, indem wir die Bildlaufposition der aktuellen Seite mit der Gesamthöhe der Seite vergleichen. Wenn die Bildlaufposition der aktuellen Seite plus die sichtbare Höhe des Fensters größer oder gleich der Gesamthöhe der Seite ist, bedeutet dies, dass sie nach unten gescrollt wurde.

Wenn wir nach unten scrollen, können wir den Vorgang zum Laden weiterer Inhalte durchführen. In diesem Beispiel demonstrieren wir die Verwendung simulierter Daten, um uns auf Schlüsseltechnologien zu konzentrieren. In tatsächlichen Projekten müssen Sie entsprechend den Anforderungen und der Datenschnittstelle Ihres eigenen Projekts entsprechende Änderungen vornehmen. 🎜rrreee🎜Im obigen Beispielcode bestimmen wir in der Rückruffunktion des Scroll-Ereignisses, ob zum Ende der Seite gescrollt werden soll. Wenn ja, wird die Funktion getMoreData() aufgerufen, um den Vorgang des Abrufens weiterer Daten zu simulieren und das Skalierungsverhältnis für jedes Bild zu berechnen, wobei das Seitenverhältnis beibehalten wird. Der Skalierungseffekt wird durch Anpassen der Stile width und height des IMG-Elements erreicht. 🎜🎜Es ist zu beachten, dass wir die ursprüngliche Breite und Höhe des Bildes erst nach dem Laden des Bildes erhalten können. Bevor das Bild geladen wird, erstellen wir zunächst ein temporäres IMG-Element und legen das src-Attribut. Wenn das Bild geladen ist, berechnen Sie die Skalierung, legen die Stile width und height fest und fügen das Bild schließlich dem Container hinzu. 🎜🎜Das Obige ist ein Beispielcode, der JavaScript verwendet, um Inhalte automatisch zu laden und dabei das Seitenverhältnis beim Scrollen zum Ende der Seite beizubehalten. Sie können den Code je nach tatsächlichem Bedarf entsprechend ändern und erweitern. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript Inhalte skalieren, die automatisch geladen werden, wenn zum Ende der Seite gescrollt wird, und den Effekt des Seitenverhältnisses beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!