Question

我已经使用Sencha touch2完成了应用程序。在轮播中，我们从控制器级别的Web服务动态绑定图像。当我们在旋转木马中移动/滑动图像时，下一张图像需要花时间加载/显示在旋转木马中。如果加载原始图像需要时间，它将在轮播上显示默认加载掩码。根据我们的要求，如果在滑动旋转木马时加载原始图像需要时间，我们需要在旋转木马中显示默认图像。一旦加载了原始图像，无需显示默认图像，显然加载掩码也会出现。 谁能告诉我如何实现这一个Sencha touch2？

我的浏览页面代码：

Ext.define('SLS.BRND.WEB.view.ProjectsView', {
  extend: 'Ext.Panel',
  requires: [        
  'Ext.Carousel'
  ],
  id: 'projectprofile',
  xtype: "projectspage",
  config: {
    autoDestroy: true,
    fullscreen: true,       
    layout: {
      type: 'vbox'
    },
    items: [{
      xtype: 'panel',
      layout: 'fit',
      flex: Ext.os.is.Phone ? 5 : 5,
      items: [{
        xtype: 'carousel',
        direction: 'horizontal',
        directionLock: true,
        id: 'ImgId',
        flex: Ext.os.is.Phone ? 5 : 5,                          
        config: {
          fullscreen: true                               
        }
      }]
    }]
  }
});

我的控制器页码：

var retrievedObject = localStorage.getItem('ProjectDetails');
jsonObj = Ext.decode(retrievedObject);
var cmp = Ext.getCmp('ImgId');

if (jsonObj != null) {
  if (jsonObj != null) {
    var itemsoverlay = [];
    if (jsonObj.ProjectMainGalleryRoyalGardenia != null) {
      for (var i = 0; i < jsonObj.ProjectMainGalleryRoyalGardenia.length; i++) {
        var imgURL = jsonObj.ProjectMainGalleryRoyalGardenia[i].ImageUrl;
        var senchaIoProjectImageURL = imgURL;
        var senchabigImage = imgURL;

        var images = [{ url: senchaIoProjectImageURL, bigUrl: senchabigImage}]
        Ext.each(images, function (picture) {
          var img = picture.url;
          var bigImg = picture.bigUrl;
          itemsoverlay.push({
            xtype: 'label',
            html: '<div style="width:' + window.innerWidth + 'px;height:' + SLS.BRND.WEB.Common.Constants.carouselCanvasHeight + 'px;"><img src=' + img + ' style="width:100%;height:100%"/></div>'
          });
        });
      }
    }
    cmp.setItems(itemsoverlay);
    cmp.setActiveItem(0);
  }
}

Answer 1

一旦快速解决方案，我可以看到将CSS类添加到包含如下图片的div：

itemsoverlay.push({
  xtype: 'label',
  html: '<div cls="myDiv" style="width:' + window.innerWidth + 'px;height:' + SLS.BRND.WEB.Common.Constants.carouselCanvasHeight + 'px;"><img src=' + img + ' style="width:100%;height:100%"/></div>'
});

然后在CSS文件中创建相关的CSS类：

.myDiv {
  background-image:url(data:image/png;base64,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);
}

这里我只是将占位符图像转换为Base 64数据并将其添加为div的背景图像。通过这种方式，您可以在实际图片加载之前显示默认图像。

通过从div中删除myDiv CSS类，您可以在加载实际图片后轻松删除默认图片。

希望这有帮助

如何在同一个轮播中滑动图像时在旋转木马中显示默认图像？

1 个答案: