implement PostsInserted and use it in ImageLoader

src/General/Get.coffee

@@ -91,6 +91,7 @@ Get =
 
     $.rmAll root
     $.add root, nodes.root
+    $.event 'PostsInserted'
   fetchedPost: (req, boardID, threadID, postID, root, context) ->
     # In case of multiple callbacks for the same request,
     # don't parse the same original post more than once.

src/General/Index.coffee

@@ -85,6 +85,7 @@ Index =
     $.asap (-> $('.board', doc) or d.readyState isnt 'loading'), ->
       board = $ '.board'
       $.replace board, Index.root
+      $.event 'PostsInserted'
       # Hacks:
       # - When removing an element from the document during page load,
       #   its ancestors will still be correctly created inside of it.
@@ -426,6 +427,7 @@ Index =
   buildStructure: (nodes) ->
     for node in nodes
       $.add Index.root, [node, $.el 'hr']
+    $.event 'PostsInserted' if doc.contains Index.root
     ThreadHiding.onIndexBuild nodes
 
   isSearching: false

src/Images/ImageLoader.coffee

@@ -15,37 +15,48 @@ ImageLoader =
             if Header.isNodeVisible thumb then thumb.play() else thumb.pause()
           return
 
+    $.on d, 'PostsInserted', ->
+      {thumbsToPlay} = ImageLoader
+      ImageLoader.thumbsToPlay = []
+      ImageLoader.play thumb for thumb in thumbsToPlay
+      g.posts.forEach ImageLoader.prefetch
+
     return unless Conf['Image Prefetching']
 
     prefetch = $.el 'label',
       <%= html('<input type="checkbox" name="prefetch"> Prefetch Images') %>
 
     @el = prefetch.firstElementChild
-    $.on @el, 'change', @toggle
+    $.on @el, 'change', ->
+      if Conf['prefetch'] = @checked
+        g.posts.forEach ImageLoader.prefetch
 
     Header.menu.addEntry
       el: prefetch
       order: 104
 
-  node: (force) ->
+  node: ->
-    return unless @file
+    if @isClone
-    {isImage, isVideo, thumb, URL} = @file
+      ImageLoader.play @file.thumb if @file?.videoThumb
-    if @isClone and @file.videoThumb
+    else
-      ImageLoader.play thumb
+      ImageLoader.prefetch @
-    return if @isClone or @isHidden or @thread.isHidden or !(isImage or isVideo)
+
-    type     = if (match = URL.match(/\.([^.]+)$/)[1].toUpperCase()) is 'JPEG' then 'JPG' else match
+  prefetch: (post) ->
-    replace  = Conf["Replace #{type}"] and !/spoiler/.test thumb.src
+    {file} = post
-    prefetch = (Conf['prefetch'] and g.VIEW is 'thread') or force
+    return unless file
-    return unless replace or prefetch
+    {isImage, isVideo, thumb, URL} = file
+    return if !(isImage or isVideo) or post.isHidden or post.thread.isHidden or file.isPrefetched
+    type    = if (match = URL.match(/\.([^.]+)$/)[1].toUpperCase()) is 'JPEG' then 'JPG' else match
+    replace = Conf["Replace #{type}"] and !/spoiler/.test thumb.src
+    return unless replace or Conf['prefetch']
+    return unless [post, post.clones...].some (clone) -> doc.contains clone.nodes.root
+    file.isPrefetched = true
     el = $.el if isImage then 'img' else 'video'
     if replace
-      if @file.isSpoiler
-        # Revealed spoilers do not have height/width set, this fixes the image's dimensions.
-        thumb.style.maxHeight = thumb.style.maxWidth = if @isReply then '125px' else '250px'
       if isImage
-        $.on el, 'load', => ImageLoader.replaceImage @
+        $.on el, 'load', => ImageLoader.replaceImage post
       else
-        $.one el, 'loadeddata', => ImageLoader.replaceVideo @, el
+        $.one el, 'loadeddata', => ImageLoader.replaceVideo post, el
     ImageLoader.queueDownload el, URL
 
   queueDownload: do ->
@@ -95,16 +106,14 @@ ImageLoader =
     $.replace thumb, video
     file.thumb      = video
     file.videoThumb = true
-    ImageLoader.play video unless post.isFetchedQuote
+    ImageLoader.play video if doc.contains(video) or post.isClone
 
-  play: (video) ->
+  thumbsToPlay: []
-    if Conf['Autoplay']
-      $.asap (-> doc.contains video), ->
-        if Header.isNodeVisible video
-          video.play()
 
-  toggle: ->
+  play: (thumb) ->
-    enabled = Conf['prefetch'] = @checked
+    return unless Conf['Autoplay']
-    if enabled
+    if doc.contains thumb
-      g.BOARD.posts.forEach (post) -> ImageLoader.node.call post, true
+      # Quote previews are off screen when inserted into document, but quickly moved on screen.
-    return
+      thumb.play() if Header.isNodeVisible(thumb) or $.id('qp')?.contains thumb
+    else
+      ImageLoader.thumbsToPlay.push thumb

src/Images/RevealSpoilers.coffee

@@ -8,5 +8,8 @@ RevealSpoilers =
   node: ->
     return if @isClone or !@file?.isSpoiler
     {thumb} = @file
+    # Remove old width and height.
     thumb.removeAttribute 'style'
+    # Enforce thumbnail size if thumbnail is replaced.
+    thumb.style.maxHeight = thumb.style.maxWidth = if @isReply then '125px' else '250px'
     thumb.src = @file.thumbURL

src/Miscellaneous/ExpandThread.coffee

@@ -101,6 +101,7 @@ ExpandThread =
       postsRoot.push root
     Main.callbackNodes Post, posts
     $.after a, postsRoot
+    $.event 'PostsInserted'
 
     postsCount    = postsRoot.length
     a.textContent = ExpandThread.text '-', postsCount, filesCount

src/Monitoring/ThreadUpdater.coffee

@@ -326,6 +326,7 @@ ThreadUpdater =
             $.add ThreadUpdater.root, root
         else
           $.add ThreadUpdater.root, root
+      $.event 'PostsInserted'
 
       if scroll
         if Conf['Bottom Scroll']