技术文摘

帝国CMS图片延迟加载的教程

作者:雨祺   发表于:
浏览:110次    字数:2108  原创
级别: 站长   总稿: 68 篇,  月稿: 0
今天小编看见坛友在提问帝国CMS图片延迟加载怎么加title标签!当然有些坛友也热情的回答了!但是没有给具体代码或是也不想把时间花在不该花的时间上面!此时作为热心的小编来说是很乐于助人的!现在就开讲帝国CMS图片延迟加载的方法!PS:其实这个也不叫帝国特有的方法!理论上面来说所有建站系统都是通用的!现在开始讲解坛友要求用PHP的方法!作为小编来说是不推荐这种写法的,毕竟这个用lazyload的JS结合JQ或者JS是最完美的!

方法1.PHP封装函数
  1. <?php   
  2. $str = '<div>   
  3. <strong> 1. 美文苑推荐文章<蒋成林/梅延煜:仙女洞的传说></strong> 
  4. <p style="text-align: center;">   
  5. <strong><a herf="https://www.meiweny.cn/gushi/mjgs/113177.html"><img title="仙女洞的传说" src="https://www.meiweny.cn/d/file/gushi/mjgs/2023-11-09/4fd4c259e3fe1bca1eb96de75d54f1d1.jpg" style="width: 375px; height: 500px;"></a></strong></p>   
  6. <strong> 2. 美文苑推荐小说<醜小鴨新娘></strong> 
  7. <p style="text-align: center;">   
  8. <strong><a herf="https://www.meiweny.cn/book/xiandaiyanqing/43/"><img title="醜小鴨新娘" src="https://www.meiweny.cn/d/file/book/xiandaiyanqing/2021-11-06/1c281b5a2c1e28aed9c0501ba6516caa.jpg" style="width: 550px; height: 333px;"></a>   
  9. </p>   
  10. </div>';   
  11. function imgzhuanhua($str) {   
  12. $pattern = '/<img[^>]*?title="(.*?)".*?src="(.*?)".*?>/i';   
  13. preg_match_all($pattern, $str, $matches);   
  14. $titles = $matches[1];   
  15. $srcs = $matches[2];   
  16. for ($i = 0; $i < count($titles); $i++) {   
  17. $imgTag = 'https://www.meiweny.cn/img/loading.gif" data-original="'.$srcs[$i].'" style="width: 550px; height: 333px;" title="'. $titles[$i] .'"';   
  18. $str = str_replace($srcs[$i], $imgTag, $str);   
  19. }   
  20. return $str;   
  21. $result = imgzhuanhua($str);   
  22. echo $result;  
打印出来是不是把图片那段地址带上lazyload图片延迟占位了,并且也保留了图片地址里面的title标签了。

方法2.JS封装函数

鉴于代码过长就不直接贴代码了,直接引用本站封装好的
  1. <script src="https://www.meiweny.cn/img/min.js "></script>
记得此地址要放在head标签里面也就是body前面。

总结,其实这上面的两种方法其实都需要JS再客户端执行的,其实最好的方法是进行图片压缩,毕竟帝国有自带图片压缩的函数
  1. // 内容图片压缩处理 
  2. function tupianyasuo($add){ 
  3. $add['newstext'] = preg_replace_callback( 
  4. '/<img.*?src="(.*?)".*?>/is'
  5. function ($callback) { 
  6. return '<img src="' . sys_ResizeImg($callback[1], 370, 200, 3) . '" width="100%">'
  7. }, 
  8. stripslashes($add['newstext']) 
  9. ); 
  10. $add['newstext'] = addslashes($add['newstext']); 
  11. return $add; 
把代码放到userfun.php中,调用这个函数即可

如果在内容里面 随机调用2-3张图片,可以这样玩
  1. <?php   
  2. $str = '<div>   
  3. <strong> 1. 美文苑推荐文章<蒋成林/梅延煜:仙女洞的传说></strong> 
  4. <p style="text-align: center;">   
  5. <strong><a herf="https://www.meiweny.cn/gushi/mjgs/113177.html"><img title="仙女洞的传说" src="https://www.meiweny.cn/d/file/gushi/mjgs/2023-11-09/4fd4c259e3fe1bca1eb96de75d54f1d1.jpg" style="width: 375px; height: 500px;"></a></strong></p>   
  6. <strong> 2. 美文苑推荐小说<醜小鴨新娘></strong> 
  7. <p style="text-align: center;">   
  8. <strong><a herf="https://www.meiweny.cn/book/xiandaiyanqing/43/"><img title="醜小鴨新娘" src="https://www.meiweny.cn/d/file/book/xiandaiyanqing/2021-11-06/1c281b5a2c1e28aed9c0501ba6516caa.jpg" style="width: 550px; height: 333px;"></a>   
  9. </p>   
  10. </div>';   
  11. $count = substr_count($str,'</p>');  
  12. $j = 0; 
  13. $num = floor($count / 2);  
  14. $tem_num = 0; 
  15. for($i = 0; $i < $count; $i++){ 
  16. $j = strpos($str, '</p>', $j); 
  17. if($i == 0){ 
  18. $str = substr($str, 0, $j) . ('<img src="/uploads/images/'.rand(1,2511).'.jpg" width="100%" height="auto" title="随机插入图片1" />') . substr($str, $j);     
  19. $j = strpos($str ,'</p>', $j); 
  20. }else if($i == ($num)){ 
  21. $str = substr($str, 0, $j) . ('<img src="/uploads/images/'.rand(1,2511).'.jpg" width="100%" height="auto" title="随机插入图片2" />') . substr($str, $j);   
  22. $j = strpos($str, '</p>', $j); 
  23. }else if($i == ($count-1)){ 
  24. $str = substr($str, 0, $j) . ('<img src="/uploads/images/'.rand(1,2511).'.jpg" width="100%" height="auto" title="随机插入图片3" />') . substr($str, $j);      
  25. $j = ($j+1); 
  26. echo $str; 

【审核人:站长】

收藏   加好友   生成海报   分享
点赞(0)
打赏
Tags: CMS 图片 教程 加载 延迟 帝国
评论(0人参与,0条评论) 雨祺
0/0
  • 请先说点什么
    最新评论

    发布者资料

    热门文章

    技术文摘

    查看更多技术文摘
    首页
    栏目
    搜索
    会员
    投稿