给文章编辑页面实现图片延迟加载功能

编辑

文档说明

作者的博文大部分是一张图一段话,日常编辑文章时也没有留意到以下情况,直到:偶然编辑多图文章时,发现浏览器的加载图标一直在转圈圈,很好奇地查看控制台,原来这是在同时加载页面中的所有图片,而自己并没有预览文章内容,嗯,于是乎有了这篇文档。

使用方法

A 涉及文件

admin/editor-js.php

B 改造文件
作用:给编辑器内容中的图片添加延迟加载功能。

  1. 打开文件 admin/editor-js.php 搜索找到以下代码:

     var images = $('img', preview), count = images.length;
  2. 在以上代码的下一行添加以下代码:

    var observer = new IntersectionObserver(function(entries, observer) {
     entries.forEach(function(entry) {
         if (entry.isIntersecting) {
             var img = entry.target;
             var srcValue = img.getAttribute('data-original'); // 获取原始图链接
             
             // 加载完成后获取图片原始尺寸并更新占位符尺寸,避免图片变形
             img.onload = function() {
                 var containerWidth = img.parentElement.clientWidth; // 获取容器宽度
                 var containerHeight = img.parentElement.clientHeight; // 获取容器高度
                 var imgWidth = img.naturalWidth; // 获取图片原始宽度
                 var imgHeight = img.naturalHeight; // 获取图片原始高度                
                 var scaleFactor = Math.min(containerWidth / imgWidth, containerHeight / imgHeight); // 计算图片缩放比例
                 
                 // 根据比例缩放图片,避免图片变形
                 img.style.width = (imgWidth * scaleFactor) + 'px'; 
                 img.style.height = (imgHeight * scaleFactor) + 'px'; 
                 
                 observer.unobserve(img); // 停止观察已经加载的图片
             };
    
             img.setAttribute('src', srcValue); // 加载图片
         }
     });
    }, { rootMargin: "200px" }); // 延迟加载时机
    
    images.each(function(index, element) {
     var imgElement = element;
     var srcValue = imgElement.getAttribute('src'); // 获取未改造 img 结构前的 src 原始图链接    
     imgElement.setAttribute('data-original', srcValue); // 将 src 值添加到 data-original 中,作为延迟加载前,待替换的原始图链接
     imgElement.setAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='); // 将未改造 img 结构前的 src 替换为单像素占位符
    
     // 设置占位符的初始尺寸,避免单像素占位符同时置于视口中,导致所有图片同时加载
     imgElement.style.width = '800px';
     imgElement.style.height = '800px';
    
     observer.observe(imgElement); // 观察图片
    });

至此,已完成给编辑器内容中的图片添加延迟加载功能,只有在点击「预览」后,处于视口中的图片才会加载显示,避免了打开编辑页时,就同时加载所有图片的情况。

教程出处

转自:http://www.lopwon.com/3651.html

评论区

暂无评论,快来抢沙发