我在网站的下拉列表中有这些巨大的屏幕截图。问题是他们在页面加载时加载，因此初始页面加载量为15.8mb ...太大了。我试图在它们被揭示时加载它们，所以我使用的是Unveil，它是Lazy Load的轻量级版本。我想我根据文档正确设置了一切。但是，一旦显示图像没有从加载图像切换到实际图像。我认为它可能与我使用的jquery版本有关。在Unveil的演示中，他使用的是1.9.1，但是我需要使用我的扩展器插件附带的jquery才能工作。以下是我使用的代码示例：
HTML：
<div class="laptop">
<span>
<img class="corpscroll" id="corp" src="/images/websites/loading.jpg" data-src="/images/websites/corp-philly.png">
</span>
</div><!-- laptop -->
jQuery的：
<!-- VENDOR JS
================================================== -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- PLUGINS
================================================== -->
<script type="text/javascript" src="js/jquery.unveil.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.scrollUp.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/jquery.colio.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>
<script type="text/javascript" src="css/colio-black/fancybox/jquery.fancybox.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="js/jquery.lazylinepainter-1.4.1.min.js"></script>
<!-- CUSTOM SCRIPT
================================================== -->
<script type="text/javascript">
(function($){
// "unveil" plugin
$("img").unveil();
// "scrollTop" plugin
$.scrollUp();
// "colio" plugin
$('.portfolio .list').colio({
id: 'demo_1',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
// init "fancybox" plugin
$('.fancybox', content).fancybox();
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
$('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f}).
trigger('colio','excludeHidden');
};
$('.portfolio .filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
isotope_run(filter);
// Define object containing your Raphael path data.
// goto http://lazylinepainter.info to convert your svg into a svgData object.
var createSVG = {
"create2": {
"strokepath": [{
"path": "M280.9,127.044h-34.049h-5.677v5.667v9.208L59.584,95.873v-7.084L161.729,49.12v4.249v5.667h5.674h34.049 h5.674v-5.667V19.366v-5.667h-5.674h-34.049h-5.674v5.667v17.708L59.584,77.098v-1.064v-5.666H53.91H19.862h-5.677v5.666v34.003 v5.671h5.674h34.049h5.673v-5.666v-2.479l181.594,46.047v8.501l-111.721,78.273H99.307h-5.674v5.669v34.004v5.666h5.674h34.048 h5.674v-5.666v-32.237l107.112-75.441h0.711H280.9h5.674v-5.666V132.71v-5.667H280.9z M173.078,25.035h22.7v22.667h-22.7V25.035z M48.234,104.374H25.536V81.706h22.698V104.374z M127.681,274.39h-22.698v-22.668h22.698V274.39z M275.223,161.047h-22.698v-22.668 h22.698V161.047z",
"duration": 1300
}],
"dimensions": {
"width": 300,
"height": 300
}
}
};
var codeSVG = {
"code2": {
"strokepath": [
{
"path": "M 274.674,249.39 L 170.237,249.394 164.405,249.394 164.405,255.869 164.405,274.028 164.405,280.5 170.237,280.5 274.674,280.5 280.5,280.5 280.5,274.028 280.5,255.869 280.5,249.394 z",
"duration": 600
},
{
"path": "M 114.556,24.29 L 22.687,76.252 19.5,78.051 19.5,82.022 19.5,95.988 19.5,99.967 22.695,101.765 114.561,153.501 123.029,158.265 123.029,147.72 123.029,132.841 123.029,128.858 119.829,127.06 51.854,88.893 119.829,50.724 123.029,48.928 123.029,44.942 123.029,30.063 123.029,19.5 z",
"duration": 600
},
{
"path": "M 222.453,19. L 205.447,19.5 201.711,19.5 200.151,23.283 98.129,271.332 94.358,280.5 103.433,280.5 120.438,280.5 124.187,280.5 125.74,276.71 227.755,28.669 231.521,19.5 z",
"duration": 600
}
],
"dimensions": {
"width": 300,
"height": 300
}
}
};
var convertSVG = {
"convert2": {
"strokepath": [
{
"path": "M209.423,15.126c24.964,0,49.92,0,74.865,0c0,23.899,0,47.801,0,71.7 c-7.242,0.62-15.717,0.09-23.447,0.269c-0.649-10.625-0.095-22.396-0.277-33.466c-2.807,1.564-5.023,3.922-7.347,6.109 c-35.226,33.115-71.141,67.045-106.495,100.377c-16.169-14.312-31.013-28.876-47.182-44.08c-0.944-0.88-3.024-2.92-3.11-2.92 c-0.572-0.02-3.995,3.495-5.079,4.513c-10.397,9.771-19.062,17.908-29.669,27.882c-1.247,1.173-4.107,4.757-4.801,4.782 c-0.866,0.033-6.854-6.174-7.625-6.903c-2.807-2.639-5.234-5.511-7.625-6.903c2.062,25.984,12.616,43.073,28.525,56.293 c15.199,12.633,38.282,22.758,66.115,19.126c25.787-3.374,44.166-15.151,56.21-30.277c11.272-14.149,20.589-35.221,16.091-60.545 c-0.233-1.336-1.022-3.164-0.831-4.252c0.38-2.358,7.261-7.62,9.037-9.29c1.664-1.56,3.318-2.863,4.801-4.248 c1.516-1.425,2.642-3.526,4.81-3.718c11.768,27.442,5.181,67.978-9.904,86.843c14.687,14.099,30.025,29.233,45.776,43.285 c7.833,6.979,19.221,14,18.639,27.873c-0.363,8.765-5.779,15.541-12.149,19.914c-7.424,5.117-20.984,5.784-29.088,0.271 c-5.442-3.706-10.121-9.506-15.268-14.337c-14.955-14.067-31.116-28.533-45.751-42.494c-16.688,8.846-37.295,14.67-61.02,13.016 c-22.459-1.563-41.211-9.627-55.093-19.116c-26.359-18.034-50.726-53.035-42.095-98.792c7.192-38.063,33.863-64.752,68.94-76.742 c19.037-6.517,44.356-7.824,64.962-2.391c19.574,5.156,34.67,14.438,47.468,26.024c-4.836,5.551-10.753,10.068-15.822,15.403 c-16.811-16.242-48.396-29.629-82.779-20.714c-28.377,7.363-47.38,26.151-57.059,50.453c2.062,3.299,4.731,4.977,7.911,7.966 c0.407,0.383,2.157,2.643,2.547,2.655c0.694,0.033,4.021-3.515,5.078-4.512c10.19-9.583,19.185-18.026,29.669-27.882 c1.283-1.218,4.255-4.761,4.801-4.781c0.866-0.037,4.956,4.39,6.499,5.84c14.454,13.595,29.236,27.866,43.784,41.163 c32.183-30.207,65.37-60.878,96.606-91.082c-11.203-0.179-23.16,0.347-33.896-0.269c0-7.082,0-14.165,0-21.243 C209.119,15.545,209.102,15.171,209.423,15.126z",
"duration": 1800
}
],
"dimensions": {
"width": 300,
"height": 300
}
}
};
/*
Setup and Paint your lazyline!
*/
$('.thing').waypoint(function() {
// Setup your Lazy Line element.
// see README file for more settings
$('#create2').lazylinepainter({"svgData": createSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint');
}, {triggerOnce: true});
$('.thing2').waypoint(function() {
// Setup your Lazy Line element.
// see README file for more settings
$('#code2').lazylinepainter({"svgData": codeSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint');
}, {triggerOnce: true});
$('.thing3').waypoint(function() {
// Setup your Lazy Line element.
// see README file for more settings
$('#convert2').lazylinepainter({"svgData": convertSVG,"strokeWidth": 2,"strokeColor": "#444444"}).lazylinepainter('paint');
}, {triggerOnce: true});
})( jQuery );
</script>
推出文档：http://luis-almeida.github.io/unveil/
我的网站：http://histeph.com/
如果你能够提供帮助，我真的很感激。
答案 0 :(得分：3)
Colio似乎正在使用jQuery 1.10.2。我尝试使用这个版本的jQuery Unveil并且示例工作，所以据我所知Unveil与这个版本的jQuery兼容。实际上，当您删除以下行时，我将在下面提供的解决方案起作用：
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
问题在于您在Colio插件加载您单击的项目组合项目的内容之前调用unveil函数，因此它会尝试加载它可以看到的图像（缩略图）而不是实际的网站屏幕截图。你想要做的是调用colio插件的onContent事件中的unveil函数，如下所示：
$('.portfolio .list').colio({
id: 'demo_1',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
// init "fancybox" plugin
$('.fancybox', content).fancybox();
// "unveil" plugin
$("img").unveil();
}
});