苹果CMS懒加载设置教程，新手也能5分钟搞定不翻车

先唠唠为啥我必须死磕这个苹果CMS懒加载

之前我做这个电影站刚有点起色，后台数据那个惨不忍睹哦——访客点开一部剧，进度条卡成PPT放幻灯片就算了，直接闪退跳回浏览器桌面的都有一大半！我蹲站长群哭唧唧问大佬，大佬甩给我一句灵魂拷问：“苹果CMS懒加载你开了吗？”

哦对！我之前只光顾着找片源找模板找广告位薅羊毛，苹果CMS懒加载这么重要的“减肥神器”“救命稻草”“高速电梯”居然给忘了！开了之后你猜咋着？当天访客留存直接涨了27%！一周下来广告点击都多了小两百！这不赶紧把踩过的坑填成台阶，给你们做个苹果CMS懒加载保姆级踩坑指南！

首先搞清楚：苹果CMS懒加载到底是个啥神仙魔法

别慌，咱用大白话加土味梗解释——你以前逛淘宝刷抖音是不是懂？往下滑的时候才加载下面的图片视频，滑到哪吃到哪，绝不提前把满汉全席堆你手机电脑内存里撑死它！

苹果CMS懒加载也是同理！你的电影站首页一般都是几十上百部剧的海报吧？以前是访客刚点开，服务器“哐哐哐”给你把所有海报、预告片链接全塞过去，就像外卖小哥不管你今天吃不吃明天吃不吃，直接把一周的外卖全堆你家门口，占地方还耽误你开门取今天的热乎饭！

开了苹果CMS懒加载之后呢？只塞访客眼睛能看到的那三五个海报，往下滑一屏塞一屏，滑到底刚好把所有餐送到胃，舒服还不占地方！电脑手机内存省了，服务器压力小了，访客打开速度嗖嗖的，那留存率不就噌噌往上涨了嘛！这就是土味版的“开源节流”懂不懂！开源是访客多了广告多了，节流是服务器带宽省了钱省了！

踩过的第一个大坑：别以为随便找个模板就自带靠谱苹果CMS懒加载

我当时犯的第一个错就是——以为我花9.9买的“2024最新爆火电影站模板”自带完美苹果CMS懒加载！结果呢？模板倒是标了有，但是海报懒加载有时候灵有时候不灵，预告片干脆就不带玩！气得我把模板作者的咸鱼消息刷了50条，人家只回了一句“模板自带基础功能，高级版得加钱”！

后来还是靠群里大佬给的免费方法搞定的！咱今天讲的就是不花一分钱、苹果CMS原生模板第三方模板通用、海报预告片列表页详情页全覆盖的苹果CMS懒加载教程！绝对靠谱，我帮你踩过9.9模板的坑、299模板的坑、甚至想自己写代码又写废了的坑！

保姆级通用版苹果CMS懒加载教程，新手看了直接抄作业

第一步：先去苹果CMS后台看看你的基础懒加载开关开了没

虽然很多基础开关开了也没用，但咱还是得先开个门探探路对吧？毕竟万一你模板刚好兼容原生的呢？那不就赚大了！

• 打开你的苹果CMS后台，就是那个加了admin或者你自己改的路径的网站哈
• 找到左侧菜单栏的系统→网站参数配置
• 往上翻找到视频设置这一栏（哦对了，有的模板分类可能不一样，你搜搜“懒加载”“延迟加载”关键词也行）
• 把图片懒加载和视频懒加载这两个小方块点成绿色的勾
• 往下翻找到保存配置按钮，别犹豫，给我狠狠点！

点完之后记得去前台刷新刷新再刷新，最好清除一下浏览器缓存（清除缓存的方法：Chrome浏览器按Ctrl+Shift+Delete，手机浏览器一般在设置里找清除数据或者隐私保护），看看灵不灵。灵的话恭喜你中奖了，直接可以划走评论区给我扣个“谢谢大佬”加个收藏！不灵的话别慌，咱还有大招！

第二步：大招来了！用免费插件或者原生代码补全你的苹果CMS懒加载

刚才的基础开关灵的概率大概只有10%，毕竟咱免费的或者便宜的模板哪有那么完美的兼容性！没关系，咱今天讲两个方法，一个是懒人版（用插件），一个是硬核版（用原生代码自己改），新手建议先试懒人版，懒人版不行再试硬核版！

懒人版插件法：一键开启，不需要懂代码

懒人版插件我只推荐群里大佬传的那个“苹果CMS万能懒加载插件”，别问为啥，因为我试了十几个免费插件，只有这个没带木马没带后门，而且覆盖范围最全！最重要的是，插件作者说永久免费！

• 首先你得去下载这个插件，别去乱七八糟的网站下，去苹果CMS官方论坛搜“万能懒加载”，第一个带版主认证的就是哈！下载下来是个zip压缩包
• 回到你的苹果CMS后台，找到左侧菜单栏的应用→应用市场
• 找到应用市场右上角的本地安装按钮，点击上传刚才下载的zip压缩包
• 上传成功之后会自动跳转安装，你只需要一路点确定就行
• 安装完之后找到左侧菜单栏的应用→已安装应用，找到“苹果CMS万能懒加载插件”，点击设置
• 设置页面很简单，你只需要把海报懒加载列表页文字懒加载详情页图片懒加载详情页视频播放器懒加载这四个小方块全点成绿色的勾就行
• 哦对了！还有个懒加载占位图选项，你可以留空用默认的灰色圆圈，也可以上传自己的logo当占位图，显得专业一点！我上传的就是我电影站的土味logo——“阿强追剧，越追越开心”
• 设置完之后别忘了狠狠点保存配置，还要去前台刷新刷新再刷新，清除浏览器缓存！

懒人版插件法我帮身边5个新手站长试过，4个一次成功，1个因为模板太老（是2018年的模板）不行，那咱就试试硬核版原生代码法！

硬核版原生代码法：自己动手，丰衣足食，土味技术流的最爱

别慌！硬核版其实也没那么硬核，都是复制粘贴的活，我帮你把代码都准备好了！你只需要找到你的模板文件，把代码放进去就行！

首先咱得找模板文件：

• 打开你的FTP工具（我用的是FileZilla，免费的，百度搜就能下），连接你的网站服务器
• 找到你的网站根目录，一般是public_html或者wwwroot
• 找到template文件夹，这就是你的模板文件夹哈
• 进去之后找到你正在用的模板文件夹，比如我用的是“阿强2024”，那就进去这个文件夹
• 找到index.html（列表页一般是index.html或者vod/list.html，详情页一般是vod/detail.html）

找到文件之后，先别着急改！一定要先备份一份！比如把index.html重命名成index_backup.html，改坏了还能换回来！这是我踩过的第二个大坑！之前改坏了模板，前台直接变成了空白页，蹲站长群哭了半小时才有人教我备份！

备份完之后，用Notepad++或者VS Code（都是免费的，百度搜就能下）打开你要改的文件：

首先在文件的标签之间（也就是最上面的那部分），复制粘贴这段CSS代码：

```css .lazy-load { opacity: 0; transition: opacity 0.3s ease-in-out; } .lazy-load.loaded { opacity: 1; } .lazy-placeholder { background-color: f0f0f0; background-image: url('你的土味logo占位图链接'); / 没有的话可以删掉这一行 / background-size: cover; background-position: center; } ```

然后在文件的标签之前（也就是最下面的那部分），复制粘贴这段JS代码：

```javascript document.addEventListener("DOMContentLoaded", function() { var lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load")); var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy-load")); var lazyIframes = [].slice.call(document.querySelectorAll("iframe.lazy-load")); if ("IntersectionObserver" in window) { let lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(function(entry) { if (entry.isIntersecting) { let lazyElement = entry.target; if (lazyElement.tagName === "IMG") { lazyElement.src = lazyElement.dataset.src; lazyElement.classList.remove("lazy-placeholder"); } else if (lazyElement.tagName === "VIDEO") { lazyElement.src = lazyElement.dataset.src; } else if (lazyElement.tagName === "IFRAME") { lazyElement.src = lazyElement.dataset.src; } lazyElement.classList.add("loaded"); observer.unobserve(lazyElement); } }); }); lazyImages.forEach(function(lazyImage) { lazyImageObserver.observe(lazyImage); }); lazyVideos.forEach(function(lazyVideo) { lazyImageObserver.observe(lazyVideo); }); lazyIframes.forEach(function(lazyIframe) { lazyImageObserver.observe(lazyIframe); }); } else { // 兼容老浏览器 let lazyLoadThrottleTimeout; function lazyLoad() { if (lazyLoadThrottleTimeout) { clearTimeout(lazyLoadThrottleTimeout); } lazyLoadThrottleTimeout = setTimeout(function() { var scrollTop = window.pageYOffset; lazyImages.forEach(function(lazyImage) { if (lazyImage.offsetTop < window.innerHeight + scrollTop) { lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove("lazy-placeholder"); lazyImage.classList.add("loaded"); } }); lazyVideos.forEach(function(lazyVideo) { if (lazyVideo.offsetTop < window.innerHeight + scrollTop) { lazyVideo.src = lazyVideo.dataset.src; lazyVideo.classList.add("loaded"); } }); lazyIframes.forEach(function(lazyIframe) { if (lazyIframe.offsetTop < window.innerHeight + scrollTop) { lazyIframe.src = lazyIframe.dataset.src; lazyIframe.classList.add("loaded"); } }); if (lazyImages.length === 0 && lazyVideos.length === 0 && lazyIframes.length === 0) { document.removeEventListener("scroll", lazyLoad); window.removeEventListener("resize", lazyLoad); window.removeEventListener("orientationchange", lazyLoad); } }, 20); } document.addEventListener("scroll", lazyLoad); window.addEventListener("resize", lazyLoad); window.addEventListener("orientationchange", lazyLoad); lazyLoad(); } }); ```

找到你模板里的img标签（海报、详情页图片都是用这个标签），把原来的src属性改成data-src属性，然后给img标签加上class="lazy-load lazy-placeholder yipinkp8o58-fnzl-6ieh"；找到video标签或者iframe标签（详情页播放器一般用这个），把原来的src属性改成data-src属性，然后给标签加上class="lazy-load yipinkp2n4w-xupf-23rj"。

举个例子哈：

原来的海报img标签：

```html ```

改完之后的海报img标签：

```html ```

原来的详情页iframe播放器标签：

```html ```

改完之后的详情页iframe播放器标签：

```html ```

改完之后别忘了保存文件，上传到FTP工具覆盖原来的文件，然后去前台刷新刷新再刷新，清除浏览器缓存！绝对灵！

最后给你们灌点土味正能量，顺便再提一嘴苹果CMS懒加载

做网站其实就像种庄稼，苹果CMS懒加载就是你的化肥农药收割机！没有化肥农药，庄稼长不好；没有收割机，收庄稼累死你还收不完！苹果CMS懒加载就是让你的“庄稼地”（电影站）长得更快，收得更多，赚得更爽！

记住哦！苹果CMS懒加载一定要开！苹果CMS懒加载一定要开！苹果CMS懒加载一定要开！重要的事情说三遍！别像我以前一样光顾着找片源找模板找广告位，忘了最基础的苹果CMS懒加载！

如果你们还有别的苹果CMS问题，欢迎在评论区留言！我看到都会回复的！毕竟我帮你踩过坑了，给你推荐靠谱的！阿强追剧，越追越开心！哦不对！阿强帮你做网站，越做越赚钱！