menu search

Ghost Lazy Load Images

Jan 20, 2017

Ghost的模板引擎暂时是不支持自定义函数的,所以如果想要实现一些替换文章内容样式等等的功能就只能在前端解决了。

最近在想的一个问题是如何在Ghost上使用Lazyload。使用这个插件需要把img标签的src改成data-original来避免浏览器自动加载。

然而如上所言,Ghost并没有提供一个简单的方法来让我们修改这个值,除了修改核心文件。

后来想到了个方法,可以用Ghost的RESTful API来获取文章内容,然后替换,再输出。

上面的想法是可行的,但挺麻烦。还要考虑到如果浏览器没有启用脚本,或者搜索引擎蜘蛛的情况。

<noscript>是一个特殊的标签。只有在浏览器不支持脚本时才会显示。所以我想到了用它来存放文章内容。然后在前端使用脚本对图片标签做相应的处理后再输出。

需要修改的地方

// post.hbs
<section class="post-content">
   <noscript>{{content}}</noscript>
</section>
var lazyloadImg = function(){
	var noscript = $('.post-content noscript'),
		html = noscript.text();

	var $html = $('<div />',{html:html});

	$html.find('img').each(function(){
		var src = $(this).attr('src');
		$(this).attr('data-original',src);
		$(this).removeAttr('src');
	});

	$('.post-content').append($html.html());

	$('img[data-original]').lazyload();	
}

Replacing / Manipulating element in html string using jquery
http://stackoverflow.com/a/22143261

Q&A

Q: FitVid插件失效了怎么办?(或者其他前端插件) A: 把那些插件的载入代码加到lazyloadImg函数的最后

Q: 这个方法只能在Ghost上用么?
A: 不,这个方法可以在任何程序上用,这里只是提供一个解决思路。

Q: 文章点开后会空白一段时间
A: 脚本还没加载好,等。

Comments

edit x send markdown image
paragraph comment heart