php图片延迟加载、懒加载的方法?

WBOY
發布: 2016-06-06 20:26:07
原創
2467 人瀏覽過

我现在的做法是,将图片的src用占位符图片代替,并使用data-src属性保存真实的图片地址,然后监控window的scroll事件,当图片出现在屏幕中时,就将data-src的值赋值给src。

但是这种做法不太方便,比如我现在不想延迟加载了,那么对于那些已经延迟加载的文章改起来就非常麻烦,比如我想在搜索引擎访问的时候不用延迟加载,用户访问的时候用延迟加载,不知道怎样做可以方便的进行切换呢?

回复内容:

我现在的做法是,将图片的src用占位符图片代替,并使用data-src属性保存真实的图片地址,然后监控window的scroll事件,当图片出现在屏幕中时,就将data-src的值赋值给src。

但是这种做法不太方便,比如我现在不想延迟加载了,那么对于那些已经延迟加载的文章改起来就非常麻烦,比如我想在搜索引擎访问的时候不用延迟加载,用户访问的时候用延迟加载,不知道怎样做可以方便的进行切换呢?

img = new Image(); img.src = 'http://www.helloworld.com/test.jpg'; img.onload = function() { var imageContainer = document.getElementById('imgContainer'); imageContainer.appendChild(img); }

你可以在数据库里存储原样的也就是src的内容,在输出之前统一加上过滤器,自动替换为data-src的形式。这样当你想恢复原样的时候,只需要把过滤器调用删掉就行了。

<code>function add_lazy_load_filter($html) {
    return preg_replace("/<img  alt="php图片延迟加载、懒加载的方法?" >/is", "<img  data-src='\"\\1\"' alt="php图片延迟加载、懒加载的方法?" >", $html);
}</code>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!