Question

我试图将许多图像附加到html中的div

<div class="google-image-layout" data-google-image-layout data-max-height="120">
</div>

使用库创建谷歌图像布局，但所有图像都来自firebase数据库，我在数据库中的图像路径为images/8873827.jpg，我创建了一个下载URL，然后将所有图像附加到上面的div这段代码 storage = undefined storageRef = undefined

getAuthWithFirebase = ->
  $("#image_processing").css('display', 'block')
  config = 
    apiKey: 'FAKE'
    authDomain: 'FAKE.com'
    databaseURL: 'FAKE.com'
    storageBucket: 'FAKE.com'

  firebase.initializeApp config
  storage = firebase.storage()
  storageRef = storage.ref()

  firebase.database().ref().child('/visilabeot@gmail|com').once 'value', (snapshot) ->
    snapshot.forEach (childSnap) ->
      if childSnap.val().Images != null
        logImageDataOnly(childSnap.val().Images)
        return

capitalizeFirstLetter = (string) ->
  string.charAt(0).toUpperCase() + string.slice(1)

logImageDataOnly = (Images) ->
  console.log Images
  $.each Images, (i, Image) ->
    tangRef = storageRef.child(capitalizeFirstLetter("#{Image.Path}"));
    tangRef.getDownloadURL().then((url) ->
      console.log Image.Path
      console.log url
      image_tag = "<img data-width='480' data-height='256' src='#{url}' />"
      $(".google-image-layout").append(image_tag)
    ).catch (error) ->
      console.log error
  return

问题是：在将图像附加到谷歌图片布局div的过程结束时，我需要调用GoogleImageLayout.init()这将创建一个图库，但是当我在完成流程后这样做时，因为它们是许多图像50+所以即使对图像网址的请求回来之前，也会调用init函数。所以我做了这个并且有效。

window.initializeHome = ->
  console.log CurrentUser.oauth_token
  getAuthWithFirebase()
  console.log "hi"
  setTimeout (->
    #your code here
    console.log "init"
    GoogleImageLayout.init()
    $("#image_processing").css('display', 'none')
    return
  ), 10000

但它的工作只有在互联网速度很好并且一切顺利的时候。然后初始化布局。哪个不对。我希望做得更漂亮，在WHOLE图像标签被附加到div后再调用这个init方法，任何帮助将不胜感激

在所有get请求上创建一个库jquery

0 个答案: